How to use ESLint with Jest

Question

I'm attempting to use the ESLint linter with the Jest testing framework.

Jest tests run with some globals like jest, which I'll need to tell the linter about; but the tricky thing is the directory structure, with Jest the tests are embedded with the source code in __tests__ folders, so the directory structure looks something like:

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

Normally, I'd have all my tests under a single dir, and I could just add an .eslintrc file there to add the globals... but I certainly don't want to add a .eslintrc file to every single __test__ dir.

For now, I've just added the test globals to the global .eslintrc file, but since that means I could now reference jest in non-testing code, that doesn't seem like the "right" solution.

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

This is a bit too brute force for an actual answer, but you could have a separate linting task that manually uses an`eslint-test` file with a glob, e.g. `eslint **/__tests__/*.js -c eslint-test.yml`. That said, I don't think there's much danger of a `jest` or `beforeEach` global leaking out into production code ;) — Nick Tomlin, Jul 27 '15 at 19:52

Dave Cooper · Accepted Answer · 2020-09-22T07:47:23.647

774

The docs show you are now able to add:

"env": {
    "jest/globals": true
}

To your .eslintrc which will add all the jest related things to your environment, eliminating the linter errors/warnings.

edited Sep 22 '20 at 07:47

answered Oct 26 '16 at 14:45

Dave Cooper

9,346
2
27
43

31

With this method the usage of "describe" or "it" outside of files that match the "*.test.js" or "__tests__/*.js" pattern will not result in linting errors. Is there any way to achieve this? – n1ru4l May 09 '17 at 17:21
8

@l0rin you could add a `.eslintrc` file that extend you default `.eslintrc` in your `__tests__` folder. If you have same problem as OP (multiple test folders), then you can generate those `.eslintrc` with a template and a tiny bash script (something like`ls **/__tests/ | xargs cp templates/.eslintrc`) – Ulysse BN Jul 22 '17 at 19:11
2

related link [here](https://eslint.org/docs/user-guide/configuring#specifying-environments) – devonj Jan 25 '18 at 09:20
3

Is this still accurate? The docs specifically say `"jest/globals": true` rather than `"jest": true`. – Kevin Ghadyani Sep 21 '20 at 20:57
@Sawtaytoes good spot. I have updated the answer accordingly :) – Dave Cooper Sep 22 '20 at 07:47

Zachary Ryan Smith · Answer 2 · 2018-12-25T02:17:57.380

82

ESLint supports this as of 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 on here, vote it up!) for the "extend in overrides" limitation of eslint config :

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

edited Dec 25 '18 at 02:17

answered Mar 10 '18 at 16:15

Zachary Ryan Smith

2,171
1
17
28

4

Thank you, this is totally the right solution for this question, as it actually answers it. worked for me! – sra Mar 21 '18 at 18:13
1

This is great! With updating my ESLint to version >= 4 and adding a `"files"` and `"env"` object to `"overrides"` in `eslint.rc` I no longer have to worry about Jest specific syntax passing linting outside of the testing files. – Chunky Chunk Jun 14 '18 at 22:46
1

Excellent solution and also works for other frameworks (jasmine) when you have a non-standard folder structure. – Elliot Nelson Dec 23 '18 at 23:09
2

I'm the guy who wrote the accepted answer - this answer is much better than mine! Although at the time I wrote my answer, it was the only way to solve this problem well. – Dave Cooper May 17 '19 at 12:58
6

ESLint now supports extending in overrides – Nick McCurdy Nov 08 '19 at 20:52

score 26 · Answer 3 · edited Dec 23 '18 at 22:57

26

You can also set the test env in your test file as follows:

/* eslint-env jest */

describe(() => {
  /* ... */
})

edited Dec 23 '18 at 22:57

mkg20001

61
1
9

answered Sep 30 '18 at 07:59

HaNdTriX

25,034
10
72
80

score 18 · Answer 4 · answered Apr 25 '18 at 10:15

To complete Zachary's answer, here is a workaround for the "extend in overrides" limitation of eslint config :

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

score 7 · Answer 5 · edited Mar 24 '20 at 11:00

7

I solved the problem REF

Run

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

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

And then add in your .eslintrc file

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

edited Mar 24 '20 at 11:00

Raz Luvaton

816
1
12
22

answered Aug 14 '19 at 04:41

Brance Lee

71
1
2

score 2 · Answer 6 · answered Jul 31 '15 at 22:01

Pattern based configs are scheduled for 2.0.0 release of ESLint. For now, however, you will have to create two separate tasks (as mentioned in the comments). One for tests and one for the rest of the code and run both of them, while providing different .eslintrc files.

P.S. There's a jest environment coming in the next release of ESLint, it will register all of the necessary globals.

score 2 · Answer 7 · answered Aug 02 '19 at 14:57

2

some of the answers assume you have 'eslint-plugin-jest' installed, however without needing to do that, you can simply do this in your .eslintrc file, add:

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

answered Aug 02 '19 at 14:57

Sebastian Scholle

376
1
10

score 1 · Answer 8 · answered Jul 22 '17 at 19:49

Add environment only for `tests` folder

You could add a .eslintrc.yml file in your __tests__ folders, that extends you basic configuration:

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

If you have only one __tests__folder, this solution is the best since it scope jest environment only where it is needed.

Dealing with many test folders

If you have more test folders (OPs case), I'd still suggest to add those files. And if you have tons of those folders 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 look for __tests__ folders and add a .eslintrc.yml file with to configuration shown above. This script has to be launched within the folder containing your parent .eslintrc.

score -9 · Answer 9 · edited Jul 27 '15 at 19:34

-9

In your .eslintignore file add the following value:

**/__tests__/

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

edited Jul 27 '15 at 19:34

Retsam

20,299
9
62
82

answered Jul 26 '15 at 01:13

Jason Shimkoski

1
1

5

That's not quite what I want, I don't want to ignore the test files, I still want to lint them, I just want to figure out how to specify the necessary options to lint them correctly. – Retsam Jul 26 '15 at 04:00
3

Very bad idea, eslint helps in all code - including test code. – Daniel Kmak Mar 13 '18 at 11:10

How to use ESLint with Jest

9 Answers9

Add environment only for `tests` folder

Dealing with many test folders

Linked

How to use ESLint with Jest

9 Answers9

Add environment only for __tests__ folder

Dealing with many test folders

Linked

Add environment only for `tests` folder