在现代 Web 开发实践中，单元测试（Unit Test）是一个必不可少的环节，它为开发者提供了一个自动化测试的机制，可以确保代码的正确性，也能够帮助开发者在修改代码时更加自信。
除了常见的测试框架如 Jest，与此同时，ESLint 也成为了一个重要的工具。ESLint 可以帮助开发者进行静态代码分析，找出代码潜在的问题和风险。
在本文中，我们将介绍如何在 Jest 单元测试中使用 ESLint 来确保代码质量。我们会描述如何配置 Jest，以便在运行测试时自动执行 ESLint 检查，并展示如何修复并提交代码中发现的问题。最后，我们会讨论如何编写一些可以帮助更好地贯彻这些最佳实践的测试样例。
安装 Jest 和 ESLint
确保您已经安装了 Node.js 和 npm，并使用 npm 安装 Jest 和 ESLint：
npm install --save-dev jest eslint eslint-plugin-jest
配置 Jest
在 Jest 的配置文件 jest.config.js 中添加以下配置来启用 ESLint：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------- ----
--
--------------------- ------------------
------------------- -
----------- ------------------
--
------------ -
---------------------------------------------------------------------------------
--
----------------------- ------ ------ --------
------------ -
-------------- ------------
--
--------------- -
--------------------------------
-------------------------------
--
--------- ---------------------
------------------------- -
--------------------------
----------------------
-
-其中，我们使用 Jest runner 来启用 ESLint。"runner": "jest-runner-eslint" 会告诉 Jest 在每个测试文件执行前使用 ESLint 进行检查，从而确保我们的代码质量。
上述配置中的其他字段是常见的 Jest 配置项目，它们与本文的重点不是特别相关，并且不赘述。但是，请确保您按照您的项目需要进行配置。
配置 ESLint
现在，我们需要对 ESLint 进行配置。创建或更新 .eslintrc.js 文件：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- -----
----- ----
--
-------- -
---------------------
-------------------------
--
-------- -
------
--
-------------- -
------------ --
----------- --------
--
------ -
------------- --------
-------------- -------
-
-root: true告诉 ESLint 这是根目录配置文件。env包含环境配置，其中jest用于启用 Jest 全局变量。extends列出了一些常用的代码风格规范。在这里，我们正在使用eslint:recommended，该配置包含了一些推荐的 ESLint 规则。plugin:jest/recommended启用了 Jest 确认规则。plugins是启用插件的数组。在这里，我们成功启用了jest插件。parserOptions告诉 ESLint 我们的代码是 ECMAScript 6 格式的，并且编写在模块中。rules包含一些规则，在这里我们告诉 ESLint 必须禁用console和debugger。
编写测试例子
现在，我们可以创建一些测试用例。如下所示，我们将创建一个非常简单的测试用例，以演示如何编写一个可以被 ESLint 执行的测试：
test("Demo test case", () => {
const a = 1;
const b = "2";
const c = true;
expect(a + parseInt(b)).toBe(3);
expect(c).toBeTruthy();
});此测试用例是一个非常简单的测试用例，它只是模拟了一些计算和真值判断。请注意以下几点：
- 这个测试用例的命名是
Demo test case。 - 我们正在创建三个变量，
a是一个数字，b是一个字符串，c是一个布尔值。 - 该用例包含两个断言，检查类型和值。
现在，我们可以运行测试，并可以看到 ESLint 检查结果：
npm run jest
给出如下输出：
-- -------------------- ---- -------
---- -----------------------
- ---- ----- ------ -- ---
----------------------------------
--- ----- ---------- ------- --------- ----------
- ---- ----- ------ -- ---
----------------------------------
--- ----- ---------- ------- --------- ----------
---- ------- - ------- - -----
------ - -----
---------- - -----
----- ----- -
--- --- ---- ------ -------- -----------------
--- ---- ---- ------- --- ----- --- ---- --------此测试执行失败，因为代码中有一个不允许的 console 语句。这正是预期的结果。请注意，我们没有任何 console 语句，它们是 Jest 自己的语句。这表明我们的配置是起作用的。
接下来，我们将修复这个问题，确保我们的测试通过通过以下更新：
test("Demo test case", () => {
const a = 1;
const b = "2";
const c = true;
expect(a + parseInt(b)).toBe(3);
expect(c).toBeTruthy();
});重新运行测试获取通过的输出：
-- -------------------- ---- -------
---- -----------------------
---- ---- ----
- ---- ---- ------- ------ -- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ---- -
--- --- ---- ------ -------- -----------------测试通过（Pass）了并且我们得到了期望的输出。
结论
在本文中，我们通过连接 Jest 和 ESLint 来增强单元测试的能力，从而帮助让开发者更好地维护代码质量和代码可维护性。我们在 Jest 中启用了 ESLint 检查，并演练了一个简单的测试用例，说明了我们的集成配置为完整代码质量保证提供了富有表现力的机制。
我们演示了如何使用 Jest 和 ESLint 联合测试和静态代码分析来提高代码质量和代码可读性。追求这些最佳实践是需通过长期而稳定的培养，需要注意一些我们的测试是正确反映预期结果的具体细节。这些技能在引入许多新库或组件时特别重要，因为代码质量和可读性是令人尊敬的程序员的标志之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbcd5e44713626016382aa