前言
对于前端开发人员来说，测试是一个非常重要的部分。在开发应用程序时，做好测试可以提高代码质量，降低 Bug 数量，使得我们的应用程序更加可靠，在上线前能够保证程序运行的稳定性。
在本文中，我们将向您介绍如何使用 Jest 进行 React Web 应用程序的测试，并提供一些有关 Jest 测试的最佳实践和技巧。
Jest 基础知识
Jest 是一个流行的基于 JavaScript 的测试框架，由 Facebook 开源。它提供了丰富的测试 API 和工具，同时具有易于使用和高效的特点。它不仅可以用于 React 应用程序，还可以用于 Node.js 应用程序、TypeScript 应用程序等等。主要特点如下：
- 易于上手和使用
- 内置了 Mock、Spy、断言等丰富的测试 API
- 自带代码覆盖率测试和快照测试
- 支持并发模式，速度快
- 支持 watch 模式，可以实时监控代码变化
配置 Jest
Jest 可以通过 npm 或 yarn 安装，然后通过配置文件进行设置。我们将使用 npm 安装 Jest,在项目目录下使用如下命令：
npm install --save-dev jest
在 package.json 文件中，我们可以添加以下脚本来运行 Jest：
{
"scripts": {
"test": "jest"
}
}编写测试用例
测试用例是用来测试应用程序的某一部分或者某一功能是否正确的代码。在 Jest 中，测试用例是由一个或多个 it 函数组成的，一个或多个 describe 函数封装 it 函数。一个 it 函数通常由断言（expect）和被测试的代码组成，例如：
-- -------------------- ---- -------
------------ --- -- -- -- -
------ - - - ---- --- -- -- -
------------- -----------
--
------ - - - ------- -- -- -
------------- -----------
--
------ - - - ---- --- -- -- -
------------- ------------
--
--在上面的代码中，我们使用 jest 的 describe 函数来创建一个 test suite，它包含三个测试用例。每个测试用例都使用 it 函数来定义具体的测试，它包含了一个被测试的方法以及预期结果。
以上是一个非常简单的测试用例示例，但它可以帮助我们了解 Jest 测试用例的基本结构。
使用 Jest 测试 React Web 应用程序
React 是一个流行的前端框架， 很多应用程序都是基于 React 框架构建的。下面我们将针对 React Web 应用程序，介绍如何使用 Jest 进行测试。
测试 React 组件
React 组件是 React 构建应用程序的基本单元，因此测试 React 组件是最基本的测试之一。 在顶级 React 组件中，我们可以直接使用 ReactDOM.render 实例化组件。
-- -------------------- ---- ------- -- ----------- ------ ----- ---- ------- ------ -------- ---- ----------- ------ --- ---- ------- --------- ------------ -- -- - ----- --- - ----------------------------- -------------------- --- ---- --
在这个测试用例中，我们使用 Jest 和 React DOM 来检查 App 组件是否可以正确地渲染。
使用 Jest 中的测试 API
Jest 提供了 Mock、Spy 等测试 API，我们可以使用这些工具来模拟一些功能，并断言我们的应用程序在不同情况下会产生什么结果。例如，我们可以使用 jest.fn() 来创建一个函数符，并跟踪函数被调用的次数和参数。
-- -------------------- ---- ------- ------ - ------- ------- --------- - ---- ------------------------ ------ ----- ---- ------- ------ ------ ---- ---------- ------------ ---------- -- -- - ----- ----------- - --------- -------------- --------------------------- ------------- -------------------------------------------- ------ -------------------------------------------- --
在上述示例中，我们创建了一个 handleClick 函数的 stub 函数（利用了mokc函数的特性），并将其传递给 Button 组件作为 onClick 事件的处理程序。随后，我们使用 render 和 screen 来查找 Button 组件并触发其单击事件。最后，我们使用 expect 来验证 handleClick 函数已被调用一次。
快照测试
快照测试是一种验证组件输出是否与以前的输出匹配的测试类型，通常是用来检查 UI 代码是否有变化。在 Jest 中，我们可以使用以下方式创建一个快照测试用例：
import renderer from 'react-test-renderer'
import React from 'react'
import Button from './Button'
test('Button 组件快照是否正确', () => {
const tree = renderer.create(<Button>Click me!</Button>).toJSON()
expect(tree).toMatchSnapshot()
})在这个测试用例中，我们使用 react-test-renderer 的 create 函数来创建一个 Button 组件的快照 JSON，并使用测试快照的取快照（toMatchSnapshot）工具函数、断言它的输出是否符合预期。
如果 Button 组件的输出与以前的输出相同，即组件没有任何变化，这个测试用例将被标记为已通过。
结论
在本文中，我们介绍了如何使用 Jest 进行 React Web 应用程序的测试，并提供了一些有关 Jest 测试的最佳实践和技巧，包括编写基本的测试用例，使用 Jest 中的测试 API，以及使用快照测试。
测试是开发一个应用程序的重要部分，通过建立和维护代码测试用例，我们的应用程序可以更加健壮和可靠，同时能够在上线前进行稳定性测试，以节省上线后排错的成本。在您的下一个 React Web 应用程序中，一定尝试使用 Jest 来写测试用例，以保证您的项目的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715bfccad1e889fe218bc69