我正在尝试将 ESLint linter 与 Jest 测试框架一起使用。
Jest 测试使用一些全局变量(例如 jest
)运行,我需要告诉 linter;但棘手的是目录结构,在 Jest 中,测试嵌入在 __tests__
文件夹中的源代码中,因此目录结构类似于:
src
foo
foo.js
__tests__
fooTest.js
bar
bar.js
__tests__
barTest.js
通常,我会将所有测试都放在一个目录下,我可以在那里添加一个 .eslintrc
文件来添加全局变量......但我当然不想将 .eslintrc
文件添加到每个 { 3}目录。
目前,我刚刚将测试全局变量添加到全局 .eslintrc
文件中,但由于这意味着我现在可以在非测试代码中引用 jest
,这似乎不是“正确”的解决方案。
有没有办法让 eslint 应用基于目录名称的某种模式的规则,或者类似的东西?
eslint-test
文件,例如 eslint **/__tests__/*.js -c eslint-test.yml
。也就是说,我认为 jest
或 beforeEach
全局泄漏到生产代码中的危险不大;)
The docs 表明您现在可以添加:
"env": {
"jest/globals": true
}
到您的 .eslintrc
中,这会将所有与开玩笑相关的内容添加到您的环境中,从而消除 linter 错误/警告。
您可能需要将 plugins: ["jest"]
包含到您的 esconfig 中,如果 eslint-plugin-jest
插件仍然无法正常工作,请添加它。
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
"files"
和 "env"
对象添加到 eslint.rc
中的 "overrides"
,我不再需要担心 Jest 特定的语法会在测试文件之外传递 linting。
您还可以在测试文件中设置测试环境,如下所示:
/* eslint-env jest */
describe(() => {
/* ... */
})
为了完成 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
我解决了问题REF
跑
# For Yarn
yarn add eslint-plugin-jest -D
# For NPM
npm i eslint-plugin-jest -D
然后添加您的 .eslintrc
文件
{
"extends": ["airbnb","plugin:jest/recommended"],
}
截至 2021 年,我认为正确的方法或至少可行的方法是安装 @types/jest
和 eslint-plugin-jest
:
npm i -D eslint-plugin-jest @types/jest
并使用@Loren 提到的覆盖指令将 Jest 插件添加到 .eslintrc.js
中:
module.exports = {
...
plugins: ["jest"],
...
overrides: [
{
files: ["**/*.test.js"],
env: { "jest/globals": true },
plugins: ["jest"],
extends: ["plugin:jest/recommended"],
},
],
...
};
这样,您的源文件和测试文件中都会出现 linting 错误,但在测试文件中,您不会遇到 test
和其他 Jest 函数的 linting 错误,但您会在源文件中出现它们在那里未定义。
"jest/globals": true
但似乎使 Eslint 停止在其他 js 文件中正常工作。但是这个解决方案对我来说完美无缺。它允许 eslint 正确地 lint .test
和 .js
文件。
一些答案假设您已经安装了 eslint-plugin-jest
,但是不需要这样做,您可以在您的 .eslintrc
中简单地执行 this文件,添加:
"globals": {
"jest": true,
}
从 ESLint V 6(2019 年底发布)开始,您可以在基于 glob 的配置中使用扩展,如下所示:
"overrides": [
{
"files": ["*.test.js"],
"env": {
"jest": true
},
"plugins": ["jest"],
"extends": ["plugin:jest/recommended"]
}
]
基于模式的配置计划用于 ESLint 的 2.0.0 版本。但是,现在,您必须创建两个单独的任务(如评论中所述)。一个用于测试,一个用于其余代码并运行它们,同时提供不同的 .eslintrc 文件。
PS 在 ESLint 的下一个版本中会有一个 jest 环境,它将注册所有必要的全局变量。
首先安装 eslint-plugin-jest
跑步:
yarn add eslint-plugin-jest or npm install eslint-plugin-jest
然后编辑 .eslintrc.json
{
"env":{
"jest": true
}
}
仅为 __tests__ 文件夹添加环境
您可以在 __tests__
文件夹中添加一个 .eslintrc.yml
文件,以扩展您的基本配置:
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
文件,其中配置如上所示。此脚本必须在包含您的父 .eslintrc
的文件夹中启动。
我花了一些时间尝试不同的选项后让它运行起来。希望这可以帮助其他人陷入困境。
.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"
]
在您的 .eslintignore 文件中添加以下值:
**/__tests__/
这应该忽略 __tests__ 目录及其子目录的所有实例。
__tests__
文件夹中添加一个扩展默认.eslintrc
的.eslintrc
文件。如果您遇到与 OP 相同的问题(多个测试文件夹),那么您可以使用模板和小型 bash 脚本(类似于ls **/__tests/ | xargs cp templates/.eslintrc
)生成这些.eslintrc
"jest/globals": true
而不是"jest": true
。