Cómo usar ESLint con Jest

254

Estoy tratando de usar el linter ESLint con el marco de prueba de Jest.

Las pruebas de Jest se ejecutan con algunas variables globales jest, de las cuales tendré que contarle al linter; pero lo complicado es la estructura del directorio, con Jest las pruebas están incrustadas con el código fuente en las __tests__carpetas, por lo que la estructura del directorio se parece a:

src
    foo
        foo.js
        __tests__
            fooTest.js
    bar
        bar.js
        __tests__
            barTest.js

Normalmente, tendría todas mis pruebas en un solo directorio, y podría agregar un .eslintrcarchivo allí para agregar los globales ... pero ciertamente no quiero agregar un .eslintrcarchivo a cada __test__directorio.

Por ahora, acabo de agregar los globales de prueba al .eslintrcarchivo global , pero dado que eso significa que ahora podría hacer referencia jesten un código que no sea de prueba, esa no parece ser la solución "correcta".

¿Hay alguna manera de obtener eslint para aplicar reglas basadas en algún patrón basado en el nombre del directorio, o algo así?

Retsam
fuente
1
Esta es una fuerza demasiado bruta para una respuesta real, pero podría tener una tarea de linting separada que utiliza manualmente un eslint-testarchivo con un globo, por ejemplo eslint **/__tests__/*.js -c eslint-test.yml. Dicho esto, no creo que haya mucho peligro de una jesto beforeEachmundial se filtre hacia el código de producción;)
Nick Tomlin

Respuestas:

672

Los documentos muestran que ahora puede agregar:

"env": {
    "jest": true
}

A .eslintrclo que agregará todas las cosas relacionadas con bromas a su entorno, eliminando los errores / advertencias de linter.

Dave Cooper
fuente
27
Con este método, el uso de "describir" o "it" fuera de los archivos que coinciden con el patrón ".test.js" o "__tests __ / .js" no generará errores de linting. ¿Hay alguna forma de lograr esto?
n1ru4l
77
@ l0rin podría agregar un .eslintrcarchivo que extienda su valor predeterminado .eslintrcen su __tests__carpeta. Si tiene el mismo problema que OP (varias carpetas de prueba), puede generarlos .eslintrccon una plantilla y un pequeño script bash (algo así como ls **/__tests/ | xargs cp templates/.eslintrc)
Ulysse BN
2
enlace relacionado aquí
devonj
73

ESLint admite esto a partir de la versión> = 4:

/*
.eslintrc.js
*/
const ERROR = 2;
const WARN = 1;

module.exports = {
  extends: "eslint:recommended",
  env: {
    es6: true
  },
  overrides: [
    {
      files: [
        "**/*.test.js"
      ],
      env: {
        jest: true // now **/*.test.js files' env has both es6 *and* jest
      },
      // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
      // "extends": ["plugin:jest/recommended"]
      plugins: ["jest"],
      rules: {
        "jest/no-disabled-tests": "warn",
        "jest/no-focused-tests": "error",
        "jest/no-identical-title": "error",
        "jest/prefer-to-have-length": "warn",
        "jest/valid-expect": "error"
      }
    }
  ],
};

Aquí hay una solución alternativa (de otra respuesta aquí, ¡vote!) Para la limitación "extender en anulaciones" de la configuración de eslint:

overrides: [
  Object.assign(
    {
      files: [ '**/*.test.js' ],
      env: { jest: true },
      plugins: [ 'jest' ],
    },
    require('eslint-plugin-jest').configs.recommended
  )
]

Desde https://github.com/eslint/eslint/issues/8813#issuecomment-320448724

Zachary Ryan Smith
fuente
44
Gracias, esta es totalmente la solución correcta para esta pregunta, ya que en realidad la responde. ¡trabajó para mi!
sra
1
¡Esto es genial! Con la actualización de mi ESLint a la versión> = 4 y añadiendo una "files"y "env"objeto a "overrides"en la eslint.rcque ya no tiene que preocuparse por la sintaxis específica broma que pasa pelusa fuera de los archivos de prueba.
TheDarkIn1978
1
Excelente solución y también funciona para otros frameworks (jazmín) cuando tienes una estructura de carpetas no estándar.
Elliot Nelson el
2
Soy el tipo que escribió la respuesta aceptada. ¡Esta respuesta es mucho mejor que la mía! Aunque en el momento en que escribí mi respuesta, era la única forma de resolver bien este problema.
Dave Cooper
66
ESLint ahora admite la extensión en anulaciones
Nick McCurdy
21

También puede configurar el entorno de prueba en su archivo de prueba de la siguiente manera:

/* eslint-env jest */

describe(() => {
  /* ... */
})
HaNdTriX
fuente
13

Para completar la respuesta de Zachary, aquí hay una solución alternativa para la limitación "extender en anulaciones" de la configuración de eslint:

overrides: [
  Object.assign(
    {
      files: [ '**/*.test.js' ],
      env: { jest: true },
      plugins: [ 'jest' ],
    },
    require('eslint-plugin-jest').configs.recommended
  )
]

Desde https://github.com/eslint/eslint/issues/8813#issuecomment-320448724

Ricovitch
fuente
2

Las configuraciones basadas en patrones están programadas para la versión 2.0.0 de ESLint. Por ahora, sin embargo, tendrá que crear dos tareas separadas (como se menciona en los comentarios). Uno para pruebas y otro para el resto del código y ejecutar ambos, al tiempo que proporciona diferentes archivos .eslintrc.

PD: En la próxima versión de ESLint llegará un entorno de broma, registrará todos los globales necesarios.

Ilya Volodin
fuente
2

Resolví el problema REF

correr

# For Yarn
yarn add eslint-plugin-jest -D

# For NPM
npm i eslint-plugin-jest -D

Y luego agrega tu .eslintrcarchivo

{
    "extends": ["airbnb","plugin:jest/recommended"],
}
Brance Lee
fuente
1

Agregar entorno solo para __tests__carpeta

Puede agregar un .eslintrc.ymlarchivo en sus __tests__carpetas, que extiende su configuración básica:

extends: <relative_path to .eslintrc>
env:
    jest: true

Si solo tiene una __tests__carpeta, esta solución es la mejor, ya que abarca el entorno jest solo donde se necesita.

Tratar con muchas carpetas de prueba

Si tiene más carpetas de prueba (caso de OP), aún sugeriría agregar esos archivos. Y si tiene toneladas de esas carpetas, puede agregarlas con un simple script zsh:

#!/usr/bin/env zsh

for folder in **/__tests__/ ;do
    count=$(($(tr -cd '/' <<< $folder | wc -c)))
    echo $folder : $count
    cat <<EOF > $folder.eslintrc.yml
extends: $(printf '../%.0s' {1..$count}).eslintrc
env:
    jest: true
EOF
done

Este script buscará __tests__carpetas y agregará un .eslintrc.ymlarchivo con la configuración que se muestra arriba. Este script debe iniciarse dentro de la carpeta que contiene su padre .eslintrc.

Ulysse BN
fuente
1

algunas de las respuestas asumen que tiene instalado 'eslint-plugin-jest', sin embargo, sin necesidad de hacerlo, simplemente puede hacer esto en su .eslintrcarchivo, agregue:

  "globals": {
    "jest": true,
  }
Sebastian Scholle
fuente
-8

En su archivo .eslintignore agregue el siguiente valor:

**/__tests__/

Esto debería ignorar todas las instancias del directorio __tests__ y sus hijos.

Jason Shimkoski
fuente
44
Eso no es exactamente lo que quiero, no quiero ignorar los archivos de prueba, todavía quiero alinearlos, solo quiero descubrir cómo especificar las opciones necesarias para alinearlos correctamente.
Retsam
2
Muy mala idea, eslint ayuda en todo el código, incluido el código de prueba.
Daniel Kmak