如何使用ESLint与Jest

我试图使用ESLint linter与Jest测试框架。

笑话测试使用一些全局变量运行，如jest，我需要告诉linter;但棘手的是目录结构，在Jest中，测试与源代码一起嵌入在__tests__文件夹中，因此目录结构看起来像这样:

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

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

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

是否有一种方法让eslint应用基于目录名或类似内容的模式的规则?

171078 次浏览
小开

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

**/__tests__/

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

小开

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

附:在ESLint的下一个版本中会有一个笑话环境，它会注册所有必要的全局变量。

小开
最佳答案

的文档显示你现在可以添加:

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

到你的.eslintrc，它将把所有与玩笑相关的东西添加到你的环境中，消除linter错误/警告。

你可能需要将plugins: ["jest"]包含到你的esconfig中，如果eslint-plugin-jest仍然不起作用，则添加eslint-plugin-jest插件。

小开

仅为__tests__文件夹添加环境

你可以在你的__tests__文件夹中添加一个.eslintrc.yml文件，它扩展了你的基本配置:

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

如果你只有一个__abc0文件夹，这个解决方案是最好的，因为它只在需要的地方覆盖玩笑环境。

处理许多测试文件夹

如果你有更多的测试文件夹(OPs情况下)，我仍然建议添加这些文件。如果你有很多这样的文件夹，可以用一个简单的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文件添加到上面所示的配置中。这个脚本必须在包含父目录.eslintrc的文件夹中启动。

小开

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配置的“扩展覆盖”限制:

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

小开

为了完成Zachary的回答，这里有一个解决eslint配置的“扩展覆盖”限制的方法:

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

小开

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

/* eslint-env jest */


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

一些答案假设你已经安装了eslint-plugin-jest，然而没有需要这样做，你可以简单地在你的.eslintrc文件添加中执行这:

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

我解决了问题裁判

运行

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


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

然后添加你的.eslintrc文件

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

在花了一段时间尝试不同的选择后，我让它运行起来了。希望这能帮助其他陷入困境的人。

.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"
]
小开

首先安装eslint-plugin-jest

运行:

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

然后编辑.eslintrc.json

{
"env":{
"jest": true
}
}
小开

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

    "overrides": [
{
"files": ["*.test.js"],
"env": {
"jest": true
},
"plugins": ["jest"],
"extends": ["plugin:jest/recommended"]
}
]
小开

截至2021年，我认为正确的方法或至少有效的方法是安装@types/jest和eslint-plugin-jest:

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

并使用@Loren提到的overrides指令将Jest插件添加到.eslintrc.js中:

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

这样你在源文件和测试文件中都会得到检测错误，但在测试文件中你不会得到test和其他Jest函数的检测错误，但你会在源文件中得到它们，因为它们在那里是未定义的。


提交答案