在前端开发中，单元测试是非常重要的一环。它可以让我们更加自信地改进代码，减少错误和不必要的回归测试，甚至可以使我们更加愉快地编写代码。
在本文中，我们将讨论 Jest 单元测试库的使用，它是一个由 Facebook 开发的优秀测试库。我们将学习 Jest 的基础知识、如何安装和设置 Jest，以及如何编写和运行单元测试。
什么是 Jest？
Jest 是一个基于 Jasmine 的单元测试库，适用于 JavaScript 应用程序。它是一个开源的框架，由 Facebook 维护和发展。它通过提供一个简单易用的 API、快速且可靠地运行测试、断言错误的显示、快速运行测试以及对 ES6+ 模块、Babel、TypeScript、Webpack、Node.js 进行了广泛的支持，使测试易于编写和维护。
Jest 的特点包括：
- 自动拦截，即不需要手动模拟任何模块。
- 利用沙盒运行，通过运行测试来统计代码覆盖率。
- 灵活的配置选项，使您能够为您的应用程序进行更细粒度的定制。
安装 Jest
在开始编写单元测试之前，我们需要先安装 Jest。安装 Jest 很简单，您可以使用 npm 或 yarn 来进行安装。
--- ------- ---------- ----
或者
---- --- ----- ----
安装完成后，您可以在项目的 package.json 文件中找到 Jest。
编写单元测试
现在我们已经安装了 Jest，现在就可以开始编写单元测试了。
一个简单的测试示例可以像这样：
-------- ------ -- - ------ - - -- - ---------- - - - -- ----- --- -- -- - ------------- ------------ ---
在上面的示例中，我们定义了一个简单的函数 sum，然后编写了一个名为“adds 1 + 2 to equal 3”的测试。在测试中，我们使用 expect 函数来断言 sum 函数的返回值是否等于 3。
运行单元测试可以使用以下命令：
--- ----
或者
---- ----
测试 Matchers
在上面的示例中，我们使用了 toBe Matcher。Matchers 是 Jest 的基本概念之一，它们是用来断言实际结果和预期结果之间的关系的函数。
下面是一些常用的 Matchers：
- expect(a).toBe(b)：a 和 b 是严格相等的。
- expect(a).toEqual(b)：a 和 b 的内容应该是相等的。
- expect(a).toStrictEqual(b)：a 和 b 的内容应该是严格相等的。
- expect(a).toBeDefined()：a 已定义。
- expect(a).toBeUndefined()：a 未定义。
- expect(a).toBeNull()：a 是 null。
- expect(a).toBeTruthy()：a 将强制转换为 true。
- expect(a).toBeFalsy()：a 将强制转换为 false。
- expect(a).toContain(b)：a 包含 b。
- expect(a).toHaveLength(b)：a 的长度为 b。
- expect(a).toMatch(/regex/)：a 匹配正则表达式。
- expect(a).toThrow()：a 抛出异常。
模拟函数
在测试中，有时候我们需要模拟函数并检查其行为是否符合预期。Jest 提供了一种称为 Jest.fn() 的函数，它允许我们轻松地模拟函数并进行判断。
以下是一个模拟函数的示例：
----- ------ - ---------- --------- -------------------------------------- -- - --------------- --------- -------------------------------------- -- - ------------------------------------- -- ------- ------------------------------------- -- -------
在上面的示例中，我们定义了一个空的模拟函数 myMock。然后我们调用它两次，并在每次调用后检查 mock.calls 属性中的参数是否正确。
异步测试
在异步测试中，我们需要等待异步操作完成，然后才能进行后续的测试。Jest 提供了多种处理异步操作的方法：
- 回调函数
- Promises
- async/await
以下是使用 Promises 的异步测试示例：
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
-
--------- ---- -- ------ -------- -- -- -
---------------------
------ --------------------- -- -
------------------------- ---------
---
---在上面的示例中，我们定义了一个名为 fetchData 的 Promise，然后编写了一个名为“the data is peanut butter”的测试。在测试中，我们用 expect 函数断言 fetchData 返回值是否等于 'peanut butter'。由于 fetchData 函数是一个 Promise，因此我们需要使用 return 关键字对其进行处理。
版本控制
Jest 支持代码覆盖率，它可以帮助我们发现应用程序中的未使用代码和覆盖率不足的代码。要使用 Jest 的代码覆盖率功能，我们需要将 --coverage 标志添加到 Jest 命令行接口中。
例如：
---- ----------
Jest 将生成一个 coverage 文件夹，其中包含有关应用程序代码覆盖率的详细信息。
结论
单元测试是前端开发过程中不可或缺的一部分。Jest 是一个功能强大且易于使用的测试库，可以让我们轻松地编写和运行测试。在本文中，我们已经学习了 Jest 的基本原理、安装过程、单元测试、Matchers、模拟函数以及异步测试。现在，我们可以将这些知识应用到我们的项目中，并确保我们的代码质量和健壮性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671be3ff9babaf620fae1169