What is the best way to use ESLint with Jest?

Problem

I’m trying to utilize the ESLint linter in conjunction with the Jest testing framework.

Jest tests use some globals like jest, which I’ll have to inform the linter about; however, the directory structure is complicated; with Jest, the tests are embedded with the source code in __tests__ folders, thus the directory structure looks something like this.

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

Normally, I’d keep all of my tests in a single directory and use an.eslintrc file to add the globals… but I don’t want to do that for each and every __test__ directory.

For now, I’ve just put the test globals to the global.eslintrc file, but that doesn’t seem like the “proper” solution because it allows me to reference jest in non-testing code.

Is it possible to have eslint apply rules based on a pattern based on the directory name, or something similar?

Asked by Retsam

Solution #1

According to the documents, you can now add:

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

To your.eslintrc, which will add all jest-related items to your environment, removing linter errors and warnings.

If it still isn’t functioning, add the eslint-plugin-jest plugin and include plugins: [“jest”] in your esconfig.

Answered by Dave Cooper

Solution #2

As of version >= 4, ESLint supports this:

/*
.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’s a solution (from another answer on this site; vote it up!) for eslint config’s “extend in overrides” limitation:

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

Answered by Zachary Ryan Smith

Solution #3

In your test file, you can also set the test env as follows:

/* eslint-env jest */

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

Answered by HaNdTriX

Solution #4

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

Answered by Ricovitch

Solution #5

REF was a difficulty that I was able to fix.

Run

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

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

Then import your.eslintrc file.

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

Answered by Brance Lee

Post is based on https://stackoverflow.com/questions/31629389/how-to-use-eslint-with-jest