Como usar o ESLint com o Jest

254

Estou tentando usar o linter ESLint com a estrutura de teste Jest.

Os testes de brincadeira são executados com algumas coisas globais jest, das quais precisarei falar ao linter; mas o mais complicado é a estrutura de diretórios. Com o Jest, os testes são incorporados ao código-fonte em__tests__ pastas; portanto, a estrutura de diretórios se parece com:

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

Normalmente, eu teria todos os meus testes em um único diretório e poderia adicionar um .eslintrc arquivo lá para adicionar os globais ... mas certamente não quero adicionar um .eslintrcarquivo a todos__test__ diretório.

Por enquanto, acabei de adicionar os globais de teste ao global .eslintrc arquivo , mas como isso significa que agora eu poderia fazer referênciajest códigos que não são de teste, isso não parece a solução "certa".

Existe uma maneira de fazer com que o eslint aplique regras com base em algum padrão baseado no nome do diretório ou algo assim?

Retsam
fonte
1
Essa é uma força bruta demais para uma resposta real, mas você pode ter uma tarefa separada de limpeza que usa manualmente um eslint-testarquivo com uma glob, por exemplo eslint **/__tests__/*.js -c eslint-test.yml. Dito isto, eu não acho que há muito perigo de uma jestou beforeEachmundial vazando para o código de produção;)
Nick Tomlin

Respostas:

672

Os documentos mostram que agora você pode adicionar:

"env": {
    "jest": true
}

Ao seu, .eslintrcque adicionará todas as coisas relacionadas a brincadeiras ao seu ambiente, eliminando os erros / avisos do linter.

Dave Cooper
fonte
27
Com esse método, o uso de "descreva" ou "it" fora dos arquivos que correspondem ao padrão ".test.js" ou "__tests __ / .js" não resultará em erros de conexão. Existe alguma maneira de conseguir isso?
N1ru4l
7
@ l0rin você pode adicionar um .eslintrcarquivo que estenda seu padrão .eslintrcna sua __tests__pasta. Se você tem mesmo problema que OP (pastas de teste múltiplas), então você pode gerar aqueles .eslintrccom um modelo e um script pequeno (algo como ls **/__tests/ | xargs cp templates/.eslintrc)
Ulysse BN
2
link relacionado aqui
devonj 25/01
73

O ESLint suporta isso na versão> = 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"
      }
    }
  ],
};

Aqui está uma solução alternativa (de outra resposta aqui, vote!) Para a limitação "extend in overrides" da configuração do eslint:

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

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

Zachary Ryan Smith
fonte
4
Obrigado, esta é totalmente a solução certa para esta pergunta, pois ela realmente responde. trabalhou para mim!
sra
1
Isso é ótimo! Com atualizando meu ESLint a versão> = 4 e adicionando um "files"e "env"objeto "overrides"em eslint.rcque já não têm de se preocupar com Jest sintaxe específica passando linting fora dos arquivos de teste.
TheDarkIn1978
1
Excelente solução e também funciona para outras estruturas (jasmim) quando você possui uma estrutura de pastas não padrão.
Elliot Nelson
2
Eu sou o cara que escreveu a resposta aceita - essa resposta é muito melhor que a minha! Embora na época em que escrevi minha resposta, essa fosse a única maneira de resolver bem esse problema.
Dave Cooper
6
ESLint agora suporta estendendo-se em substituições
Nick McCurdy
21

Você também pode definir o ambiente de teste no seu arquivo de teste da seguinte maneira:

/* eslint-env jest */

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

Para concluir a resposta de Zachary, aqui está uma solução alternativa para a limitação "estender em substituições" da configuração do eslint:

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

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

Ricovitch
fonte
2

As configurações baseadas em padrão estão agendadas para a liberação 2.0.0 do ESLint. Por enquanto, no entanto, você terá que criar duas tarefas separadas (conforme mencionado nos comentários). Um para testes e outro para o restante do código e execute os dois, fornecendo arquivos .eslintrc diferentes.

PS: Na próxima versão do ESLint, haverá um ambiente de brincadeira. Ele registrará todos os globals necessários.

Ilya Volodin
fonte
2

Eu resolvi o problema REF

Corre

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

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

E depois adicione seu .eslintrcarquivo

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

Adicione ambiente apenas para __tests__ pasta

Você pode adicionar um .eslintrc.ymlarquivo em suas __tests__pastas, que amplia sua configuração básica:

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

Se você tiver apenas um __tests__ pasta, essa solução é a melhor, pois escopo apenas o ambiente de brincadeira onde for necessário.

Lidando com muitas pastas de teste

Se você tiver mais pastas de teste (caso de OPs), ainda sugiro adicionar esses arquivos. E se você tiver várias dessas pastas, adicione-as com um script zsh simples:

#!/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 procurará __tests__pastas e adicionará um .eslintrc.ymlarquivo à configuração mostrada acima. Este script deve ser iniciado dentro da pasta que contém seu pai .eslintrc.

Ulysse BN
fonte
1

algumas das respostas pressupõem que você tenha o 'eslint-plugin-jest' instalado; no entanto, sem a necessidade de fazer isso, você pode simplesmente fazer isso no seu .eslintrcarquivo e adicionar:

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

No seu arquivo .eslintignore, adicione o seguinte valor:

**/__tests__/

Isso deve ignorar todas as instâncias do diretório __tests__ e seus filhos.

Jason Shimkoski
fonte
4
Não é exatamente isso que eu quero, não quero ignorar os arquivos de teste, ainda quero lintá-los, só quero descobrir como especificar as opções necessárias para lintá-los corretamente.
Retsam 26/07/2015
2
Muito má ideia, o eslint ajuda em todo o código - incluindo o código de teste.
Daniel Kmak