How to use ESLint with Jest

Question

I am trying to use the ESLint linker with the Jest testing framework.

Jest tests run with some global variables like jest , which I will need to talk about about this; but the directory structure is a daunting task, and Jest tests are embedded in the source code in the __tests__ folders, so the directory structure looks something like this:

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

Typically, I would have all my tests in the same directory, and I could add the .eslintrc file there to add global variables ... but I certainly do not want to add the .eslintrc file to each __test__ .

Currently, I have only added test globals to the global .eslintrc file, but since this means that I can now reference jest in non-testing code, which does not seem to be the “correct” solution,

Is there a way to get eslint to apply rules based on some pattern based on the directory name or something like that?

Answer 1

The docs show that now you can add:

 "env": { "jest": true } 

To your .eslintrc , which will add all the joke-related stuff to your environment, eliminating linter errors / warnings.

Hope this helps!

Answer 2

ESLint has supported this since version> = 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" } } ], }; 

Here is a workaround (from another answer here, vote for it!) To limit the "extension in overrides" of the eslint configuration:

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

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

Answer 3

You can also install the test environment in your test file as follows:

 /* eslint-env jest */ describe(() => { /* ... */ }) 

Answer 4

To complete the catch-up answer, here is a workaround to limit the "extension in overrides" in the eslint configuration:

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

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

Answer 5

Template-based configurations are planned for version 2.0.0 of ESLint. In the meantime, you will have to create two separate tasks (as indicated in the comments). One for tests and one for the rest of the code and run both of them when providing different .eslintrc files.

PS In the next version of ESLint there is a joke environment, it will register all the necessary global variables.

Answer 6

Add environment for __tests__ folder __tests__

You can add the .eslintrc.yml file to your __tests__ folders, which extends the basic configuration:

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

If you have only one __tests__ folder, this solution is best, since it works in the jest environment only where it is needed.

Work with many test folders

If you have more test folders (OPs case), I would suggest adding these files. And if you have tons of these folders, you can add them with a simple zsh script:

 #!/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 

This script will search for __tests__ folders and add the .eslintrc.yml file to the configuration shown above. This script should be run in the folder containing the parent .eslintrc .

Answer 7

some answers assume that you have "eslint-plugin-jest" installed, however, without doing this, you can simply do this in your .eslintrc file by adding:

  "globals": { "jest": true, } 

Answer 8

I solved the REF problem

add eslint-plugin-jest yarn and customize .eslintrc file

 { "extends": ["airbnb","plugin:jest/recommended"], } 

Answer 9

In your .eslintignore file, add the following value:

 **/__tests__/ 

This should ignore all instances of the __tests__ directory and their children.