在前端开发中，代码的质量和规范性是非常重要的，而代码检查工具 ESLint 可以帮助我们进行代码质量的监测和管理。在 Jest 测试中集成 ESLint 可以让我们在编写测试用例的同时，也保证了代码的质量。
ESLint 简介
ESLint 是一个用于 JavaScript 代码检查的开源工具，它可以检查代码的语法、样式、逻辑等方面，支持通过配置文件来指定检查规则，还能够集成到编辑器或者构建工具中。
Jest 简介
Jest 是 Facebook 推出的一款 JavaScript 测试框架，它的特点是简单易用，同时提供了无需配置、极少级别的 API 等特性。目前，Jest 已经成为 React 官方推荐的测试框架，并且越来越受到业界的关注和使用。
集成 ESLint 到 Jest 测试
在 Jest 测试中集成 ESLint 主要包括以下三个步骤：
1. 安装依赖
在集成 ESLint 到 Jest 测试中，我们需要安装以下几个依赖：
yarn add eslint eslint-plugin-jest eslint-config-jest @jest/globals --dev
其中，eslint 是 ESLint 工具本身，eslint-plugin-jest 是 ESLint 插件，eslint-config-jest 是 Jest 配置规则，@jest/globals 是 Jest 内置的全局变量。
2. 创建配置文件
在项目目录中创建 .eslintrc.js，并配置如下代码：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------- ---------------------------
---- -
--------------- ----
--
-------- -
------
--
------ -
------------- -----
-
-在上面的代码中：
extends字段用于继承和集成eslint:recommended和plugin:jest/recommended两个配置规则，这两个配置规则是 ESLint 和 Jest 推荐的配置规则。env字段指定全局环境变量。plugins字段用于加载插件。rules字段用于配置代码检查规则。
3. 在 Jest 测试中配置 ESLint
在 Jest 的测试配置文件中（一般是 jest.config.js 文件），添加以下代码：
module.exports = {
...
globals: {
'__DEV__': true
},
setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
...
}其中，__DEV__ 是全局变量，setupFilesAfterEnv 配置用于 Jest 在每个测试用例执行前添加一些自定义的操作，在这里我们添加了 test/setupTests.js 文件。
在 test/setupTests.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- - ------ - - -----------------
----- ------ - --- --------
------------------- --------------
--
--------------- -- -- -
----- ---- - ----- -----------------------------
----- ---------- - ------------------- ----- -- ----- - ---------------- --
-- ----------- - -- -
--------------------- ----- --------
---------------
-
--在上面的代码中，我们实例化了 ESLint 对象，并使用 overrideConfigFile 选项指定了我们上面创建的 ESLint 配置文件。在 beforeAll 函数中，我们使用 lintFiles 方法对项目中的所有 JavaScript 文件进行检查，并统计出错误数量，在有错误的情况下，输出错误提示信息并退出进程。
示例代码
最后，我们给出一个简单的示例代码，以演示如何在 Jest 测试中集成 ESLint。
-- -------------------- ---- -------
-- --------------------
------ --------- ---- ----------------
----------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - --- -----------
--------------------------------------------
--
---- -------------------- ---- -------
-- --------------
------ ----- ---- -------
----- ------- ------- --------------- -
-------- -
------ ---------- ------------
-
-
------ ------- -------在项目根目录下创建 .eslintrc.js 文件，输入以下代码：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------- ---------------------------
---- -
--------------- ----
--
-------- -
------
--
------ -
------------- -----
-
-在 jest.config.js 文件中添加以下代码：
module.exports = {
...
globals: {
'__DEV__': true
},
setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
...
}最后，在 test/setupTests.js 文件中添加以下代码：
-- -------------------- ---- -------
----- - ------ - - -----------------
----- ------ - --- --------
------------------- --------------
--
--------------- -- -- -
----- ---- - ----- -----------------------------
----- ---------- - ------------------- ----- -- ----- - ---------------- --
-- ----------- - -- -
--------------------- ----- --------
---------------
-
--运行以下命令进行测试：
yarn jest
如果代码存在错误，将会输出错误提示信息并退出进程。
总结
本文介绍了如何在 Jest 测试中集成 ESLint 代码检查，包括安装依赖、创建配置文件、在 Jest 测试中配置 ESLint，最后给出了一个简单的示例代码。当我们在编写测试用例的同时，也保证了代码的质量，有利于项目的开发和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f52b6df6b2d6eab3ddb01f