334

我正在尝试将 ESLint linter 与 Jest 测试框架一起使用。

Jest 测试使用一些全局变量运行,例如jest,我需要告诉 linter;但棘手的是目录结构,在 Jest 中,测试嵌入在__tests__文件夹中的源代码中,所以目录结构看起来像:

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

通常,我会将所有测试都放在一个目录下,我可以在.eslintrc那里添加一个文件来添加全局变量......但我当然不想.eslintrc向每个__test__目录添加一个文件。

现在,我刚刚将测试全局变量添加到全局.eslintrc文件中,但是由于这意味着我现在可以jest在非测试代码中引用,这似乎不是“正确”的解决方案。

有没有办法让 eslint 应用基于目录名称的某种模式的规则,或者类似的东西?

4

13 回答 13

836

文档显示您现在可以添加:

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

到您的.eslintrc哪个会将所有与开玩笑相关的东西添加到您的环境中,从而消除 linter 错误/警告。

您可能需要将其包含plugins: ["jest"]到您的 esconfig 中,eslint-plugin-jest如果插件仍然无法正常工作,请添加该插件。

于 2016-10-26T14:45:30.433 回答
89

ESLint 从版本 >= 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"
      }
    }
  ],
};

这是 eslint config 的“扩展覆盖”限制的解决方法(从这里的另一个答案,投票!):

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

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

于 2018-03-10T16:15:53.783 回答
27

您还可以在测试文件中设置测试环境,如下所示:

/* eslint-env jest */

describe(() => {
  /* ... */
})
于 2018-09-30T07:59:43.753 回答
20

为了完成 Zachary 的回答,这里是 eslint config 的“扩展覆盖”限制的解决方法:

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

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

于 2018-04-25T10:15:15.413 回答
11

我解决了问题REF

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

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

然后在你的.eslintrc文件中添加

{
    "extends": ["airbnb","plugin:jest/recommended"],
}
于 2019-08-14T04:41:29.980 回答
4

截至 2021 年,我认为正确的方法或至少可行的方法是安装@types/jesteslint-plugin-jest

npm i -D eslint-plugin-jest @types/jest

.eslintrc.js并使用@Loren 提到的覆盖指令添加 Jest 插件:

module.exports = {
  ...
  plugins: ["jest"],
  ...
  overrides: [
    {
      files: ["**/*.test.js"],
      env: { "jest/globals": true },
      plugins: ["jest"],
      extends: ["plugin:jest/recommended"],
    },
  ],
  ...
};

这样,您会在源文件和测试文件中获得 linting 错误,但在测试文件中,您不会遇到test其他 Jest 函数的 linting 错误,但您会在源文件中获得它们,因为它们在那里显示为未定义.

于 2021-10-29T11:14:48.083 回答
3

从 ESLint V 6(2019 年底发布)开始,您可以在基于 glob 的配置中使用扩展,如下所示:

    "overrides": [
      {
        "files": ["*.test.js"],
        "env": {
          "jest": true
        },
        "plugins": ["jest"],
        "extends": ["plugin:jest/recommended"]
      }
    ]
于 2021-10-28T14:23:00.187 回答
3

一些答案假设您已经eslint-plugin-jest安装,但是不需要这样做,您可以简单地在文件中执行此操作,添加.eslintrc

  "globals": {
    "jest": true,
  }
于 2019-08-02T14:57:49.360 回答
2

基于模式的配置计划用于 ESLint 的 2.0.0 版本。但是,现在,您必须创建两个单独的任务(如评论中所述)。一个用于测试,一个用于其余代码并运行它们,同时提供不同的 .eslintrc 文件。

PS 在 ESLint 的下一个版本中会有一个 jest 环境,它将注册所有必要的全局变量。

于 2015-07-31T22:01:16.443 回答
2

__tests__仅为文件夹添加环境

您可以在文件夹中添加一个.eslintrc.yml文件__tests__,扩展您的基本配置:

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

如果您只有一个__tests__文件夹,则此解决方案是最好的,因为它仅将 jest 环境限定在需要的地方。

处理许多测试文件夹

如果您有更多测试文件夹(OP 案例),我仍然建议添加这些文件。如果您有大量这些文件夹,可以使用简单的 zsh 脚本添加它们:

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

该脚本将查找__tests__文件夹并将.eslintrc.yml文件添加到上面显示的配置中。此脚本必须在包含您的 parent 的文件夹中启动.eslintrc

于 2017-07-22T19:49:21.693 回答
1

我花了一些时间尝试不同的选项后让它运行起来。希望这可以帮助其他人陷入困境。

.eslintrc.json(在根项目文件夹中):

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest/globals": true
    },
    "extends": [
        "standard",
        "plugin:jest/all"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "jest/no-hooks": [
            "error",
            {
                "allow": [
                    "afterEach",
                    "beforeEach"
                ]
            }
        ]
    },
    "plugins": [
        "jest"
    ]
}

空 .babelrc(在根项目文件夹中):

{}

.package.json(在根项目文件夹中):

{
  "scripts": {
    "test": "jest",
    "lint": "npx eslint --format=table .",
    "lintfix": "npx eslint --fix ."
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "aws-sdk-mock": "^5.2.1",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "jest": "^27.0.6"
  }
}

VS Code settings.xml(编辑器配置:启用保存+ babel解析器的自动修复):

    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.options": {
        "parser": "@babel/eslint-parser"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript"
    ]
于 2021-08-16T19:28:22.897 回答
1

首先安装eslint-plugin-jest

跑步:

 yarn add eslint-plugin-jest or npm install eslint-plugin-jest

然后编辑.eslintrc.json

{
   "env":{
     "jest": true
   }
}
于 2021-09-18T03:28:27.743 回答
-11

在您的 .eslintignore 文件中添加以下值:

**/__tests__/

这应该忽略 __tests__ 目录及其子目录的所有实例。

于 2015-07-26T01:13:54.310 回答