引言
在现代 Web 开发中，前端框架如 React 已经变得十分流行。在使用 React 构建应用时，确保代码的质量和稳定性至关重要。单元测试是 React 开发中的一个必不可少的环节。Jest 是 Facebook 推出的一款基于 Jasmine 的 JavaScript 测试框架，它非常适合用于测试 React 组件。
在本文中，我们将学习如何使用 Jest 进行 React 项目单元测试，并提供一些最佳实践和示例代码。
Jest 简介
Jest 是一个开源的基于 JavaScript 的测试框架。它提供了一种简单、快速的方式来编写测试，并支持代码覆盖率报告、Mock 等功能。Jest 是一个全面且易于使用的框架。
Jest 具有以下优点：
快速: Jest 使得测试速度非常快。它使用了并行执行测试的方法，减少了测试执行的时间。
易于使用: Jest 的使用方法非常简单，你不需要编写任何配置文件。
自动 Mock: Jest 能自动将所有的依赖项替换为自动创建的 Mock 对象。
Snapshot Testing: Jest 集成了一种称为快照测试 (Snapshot Testing) 的测试方法。它非常适合用于测试 UI 组件。
安装 Jest
要使用 Jest 进行 React 项目单元测试，首先需要将 Jest 添加到项目中。你可以使用 npm 或 Yarn 进行安装。在项目的根目录下执行以下命令：
npm install --save-dev jest
或
yarn add --dev jest
安装成功后，你应该可以在项目的根目录下找到一个 node_modules/jest 文件夹。
编写测试用例
接下来，我们将创建一个名为 sum.js 的模块，它将两个数字相加。这个模块的代码如下：
function sum(a, b) {
return a + b;
}
module.exports = sum;现在，我们来编写一个测试用例来验证这个模块是否正常工作。为此，我们需要创建一个名为 sum.test.js 的文件，其中包含以下代码：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在这个测试用例中，我们首先导入了 sum 模块。然后，我们使用 test 函数创建了一个测试用例。test 函数有两个参数: 第一个参数是测试用例的名称，第二个参数是实际的测试代码。在这个测试用例中，我们使用了 expect 函数来期望 sum(1, 2) 的返回值为 3。
执行 Jest 测试需要在终端输入 npx jest。输出将会是类似如下的结果：
PASS ./sum.test.js ✓ adds 1 + 2 to equal 3 (4ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.85s Ran all test suites.
测试通过！现在，我们已经成功地使用 Jest 编写了我们的第一个测试用例。
模块 Mock
一般来说，React 组件会依赖多个模块，例如 Redux 的 store、后端 API 等。为了编写单元测试，我们需要在测试中使用 Mock 对象替换这些依赖。
使用 Jest 进行模块 Mock 非常简单。例如，假设我们有一个名为 login.js 的组件，它依赖一个名为 auth.js 的模块，用于授权。
-- -------------------- ---- -------
------ ---- ---- ------------
----- ----- ------- --------- -
----------- - -- -- -
----- - --------- -------- - - -----------
----- ----- - -------------------- ----------
----------------------------- -------
-----------------------------
-
-- ---
-然后我们有一个用于测 login 组件的测试用例 login.test.js，测试流程如下：
-- -------------------- ---- -------
------ ---- ---- ------------
------ - ------- --------- - ---- -------------------------
------ ----- ---- -------------
-- ---- -------
---------------------- -- -- --
------ ---------- -- -------------
----
------------ ------ ----- ---- ----- -- --------- -- -- -
----- - --------------- --------- - - ------------- ----
-------------------------------------------- -
------- - ------ ------- --
---
-------------------------------------------- -
------- - ------ ---------- --
---
------------------------------ ------
------------------------------------------------ ------------
-----------------------------------------------------------
---在这个测试用例中，我们将 auth.js 模块替换为一个 Mock 对象。Mock 对象可以用 jest.fn 函数来创建。jest.fn 函数将自动创建一个 Mock 对象，用于模拟 auth.login 函数。
在测试结束时，我们可以通过断言 auth.login 是否调用过来验证我们的测试用例是否正确。
集成测试和 Snapshot 测试
在 React 开发中，集成测试和快照测试都非常有用。
集成测试主要用于验证组件与其相关的组件和库的交互是否正常。例如，我们有一个名为 Order 组件，它依赖于 Product 和 Cart 组件。
-- -------------------- ---- -------
----- ----- ------- --------------- -
-------- -
----- - -------- ---- - - -----------
------ -
-----
--------------- ----------------- --
------------ ----------- --
------
--
-
-接下来，我们可以写一个测试用例，用来验证这个 Order 组件是否正常。在这个测试用例中，我们使用了 React Testing Library，它可以帮助我们轻松地进行组件集成测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ------ - ---- -------------------------
------ ----- ---- ----------
--------------- ----------- -- -- -
-------------------
------------ ------- ------- --- ------ -- -- -
----- ------- - - ----- ----- --------- ------------ ----- ------------ --
----- ---- - - --------- -- ------ --- --
----- - --------- - - ------------- ----------------- ----------- ----
---------------------- --------------------------------
---------------------- ------------------------------------
--------------------------------------------
----------------------------------------------
---
---快照测试则是在前端组件开发中非常有用的一种测试方法。它能够确保组件在不同环境中的表现一致。
例如，我们有一个名为 Button 的组件，我们可以使用 Snapshot 测试来捕获它的正确渲染结果。在这个测试用例中，我们使用了 react-test-renderer 包来创建一个快照。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ----------- ------------ ------- ----------- -- -- - ----- --------- - ----------------------- ---- --- ---- - ------------------- ------------------------------- ---
执行这个测试用例后，如果 Button 组件的渲染结果与之前所捕获的快照不相同，测试用例将会失败。在这种情况下，我们可能需要检查我们的组件实现或者更新快照。
测试覆盖率
测试覆盖率是评估软件测试精度的一种标准。在 React 项目中，测试覆盖率非常关键，因为它可以帮助我们确保代码中的每一行都经过了测试。
Jest 能够生成测试覆盖率报告。在这个报告中，我们可以看到哪些代码被测试覆盖了，哪些代码没有被覆盖。我们可以通过这个报告来提高我们的测试质量。
在 Jest 中，你可以使用 --coverage 参数来生成测试覆盖率报告。在终端中，运行以下命令：
npx jest --coverage
测试结束后，Jest 将会为你生成覆盖率报告。这个报告将会告诉你每个文件的测试覆盖率情况，包括语句覆盖率、函数覆盖率和分支覆盖率。
结论
在本文中，我们学习了如何使用 Jest 进行 React 项目单元测试，并提供了一些最佳实践和示例代码。我们深入了解了 Jest 的一些特性：模块 Mock、Snapshot 测试、集成测试以及测试覆盖率等。
使用 Jest 进行单元测试可以帮助我们提高代码的质量，并且让我们在构建应用程序时更加自信和放心。我希望这篇文章能够对你有所帮助，让你更好地掌握 Jest。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67068875d91dce0dc85e4e61