93

I'm using Jest to write some specs and ESLint to lint the styling.

For my foo.spec.js tests, eslint keeps throwing the following errors. It seems to think that jest, beforeEach, afterEach, etc... are not defined in that file.

   11:1   error  'beforeEach' is not defined  no-undef
   12:3   error  'jest' is not defined        no-undef
   14:13  error  'jest' is not defined        no-undef
   18:1   error  'afterEach' is not defined   no-undef
   20:1   error  'describe' is not defined    no-undef
   21:3   error  'it' is not defined          no-undef
   25:5   error  'expect' is not defined      no-undef
   28:5   error  'expect' is not defined      no-undef
   31:5   error  'expect' is not defined      no-undef
   34:3   error  'it' is not defined          no-undef
   38:5   error  'expect' is not defined      no-undef
   41:5   error  'jest' is not defined        no-undef
   42:5   error  'expect' is not defined      no-undef
   43:5   error  'expect' is not defined      no-undef
   46:3   error  'it' is not defined          no-undef
   54:5   error  'expect' is not defined      no-undef
   58:5   error  'jest' is not defined        no-undef

I believe those are included by jest automatically and so they don't need to be explicitly imported in my spec files. In fact the only thing I import via my jest.setup.js file is

import "react-testing-library/cleanup-after-each";
import "jest-dom/extend-expect";

Is there a way to eliminate these errors without having to disable eslint rules at the top of each individual file or inline?

Thanks!

user2490003
  • 10,706
  • 17
  • 79
  • 155
  • Does this answer your question? [How to use ESLint with Jest](https://stackoverflow.com/questions/31629389/how-to-use-eslint-with-jest) – pipedreambomb Jun 19 '21 at 17:35

6 Answers6

162

Please, add the following to your .eslintrc file:

{
  "overrides": [
    {
      "files": [
        "**/*.spec.js",
        "**/*.spec.jsx"
      ],
      "env": {
        "jest": true
      }
    }
  ]
}
user2490003
  • 10,706
  • 17
  • 79
  • 155
Janderson Constantino
  • 1,831
  • 1
  • 7
  • 5
109

You do not need to add this override option and specify in which files jest should be available. Adding only env field should be enough.

.eslintrc.js:

module.exports = {
  env: {
    jest: true
  },
//...
}
Krzysztof Kaczyński
  • 4,412
  • 6
  • 28
  • 51
  • This, by itself, doesn't work for me. If I exclude `spec` files in `tsconfig`, I'm able to put together a configuration that fixes the no-def issue, but doesn't lead to consistent linting between jest and production files, which is the Holy Grail I seek. I remain on my quest. – tim.rohrer Sep 28 '21 at 14:21
  • 2
    Worked for me, thanks. If someone else needs, my `.eslint.json` file now has: `"env": { "commonjs": true, "es2021": true, "node": true, "jest": true }` – Carlos Jan 20 '22 at 13:18
  • This is the right answer for next.js in typescript – Mo. Jun 27 '23 at 13:24
23

Had a similar problem with eslint throwing no-undef errors for my jest setup.js file with some jest.mocks in it.

Ended up fixing it by using the ESLint plugin for Jest.

After installing the plugin as a dev dependency, I merged the following into my .eslintrc config file per instructions from the plugin readme.

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

Then the no-undef errors are gone.

Sean Lee
  • 461
  • 5
  • 10
2

I was facing the same issue!. I saw an answer for adding a comment like this:

/* eslint-env jest */

This works the best as I dont want to install any unnecessary plugin or config statements.

Add this comment to all your test files and you are done!

Credits: https://stackoverflow.com/users/154133/friederbluemle to this user for the simplest solution!

Naman_DT98
  • 21
  • 1
  • 4
1

The environment can also be applied to individual files (without modifying configuration files).

For example, use this comment at the top of the file:

/* eslint-env jest */

This can be useful when there are some files (e.g. jest.setup.js), that access jest. and are outside the regular test folders.

friederbluemle
  • 33,549
  • 14
  • 108
  • 109
0

As I am using a StandardJS Linter none of the suggested solution worked for me. Instead, I had to define a global for "it" within my standard-config.

E.g. in package.json:

...
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "afterAll",
      "beforeAll",
      "afterEach",
      "jasmine",
      "describe",
      "test",
      "jest",
      "expect",
      "it"
    ]
 }
...