Jest 是一个 Facebook 推出的开源 JavaScript 测试框架。它是 React 官方推荐的测试工具之一。在前端开发中，我们常需要测试 React 组件，这篇文章将介绍 Jest 测试 React 组件的最佳实践，帮助你写出高质量的测试代码。
安装 Jest
使用 Jest 测试 React 组件需要安装 Jest。可以使用 npm 进行安装：
npm install --save-dev jest
编写测试用例
Jest 的测试用例被称为“测试套件（test suite）”。每个测试套件包含一个或多个“测试用例（test case）”，每个测试用例都是一个独立的测试。一个测试用例应该只专注于测试一个特定的行为。
一个最简单的 React 组件测试用例如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- -------- ------------- - ------ ------- ----------------------------------------------- - ------------ ------- ----------- -- -- - ----- - --------- - - -------------- ------------- ---- ----- ------ - ------------------- ----------------------------------- ---
首先，我们导入 React 和 @testing-library/react 库。然后，定义了一个简单的组件 Button，它接收一个 label 属性和一个 onClick 回调函数。这个组件只是一个简单的按钮，当点击按钮时，将会调用传入的 onClick 回调函数。
然后，我们在一个测试套件中编写了一个测试用例。这个测试用例使用了 Jest 提供的 render 函数，渲染了 Button 组件，并使用 getByText 函数获取了按钮组件。最后，我们使用了 expect 断言，判断按钮是否被渲染到了文档中。
深度渲染（Deep Rendering）
在测试 React 组件时，我们通常需要对组件进行深度渲染（deep rendering），即渲染组件的所有子组件直到最后一个节点。深度渲染能够更好地模拟组件在实际应用中的行为。
在 Jest 中，我们可以使用 mount 函数来进行深度渲染。这个函数在 @testing-library/react 库中并不存在，我们可以使用 enzyme 库的 mount 函数来代替它。
安装 enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
配置 enzyme：
// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });在测试文件中使用 mount 函数进行深度渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------- ----------- -
-------- ------------------- -
-----------------------
-----------------------------------------------------
-
------ -
----- ------------------------
------ ------------------------------------
------ ------------- --
------- -----------------------------
-------
--
-
---------- ----- -------- ---- --- ----- ------- -- -- -
----- ------------ - ----------
----- ------- - ----------- ----------------------- ----
----- ----- - --------------------------
----- ---- - ---------------------
---------------------- - --------
------------------------
---------------------------------------------------
---在这个测试用例中，我们编写了一个简单的表单组件 Form。这个组件接收一个 onSubmit 回调函数，当表单提交时，将会调用这个回调函数并将输入框的值作为参数传递到它里面。
我们使用 mount 函数来进行深度渲染，并使用 find 函数查找输入框和表单元素。然后，我们修改了输入框的值，模拟表单提交，并使用 toHaveBeenCalledWith 断言判断 handleSubmit 是否被调用，并且调用参数是否正确。
异步测试
在测试 React 组件时，我们经常需要测试异步行为，比如组件的 fetch 请求等。在 Jest 中，我们可以使用 async 和 await 关键字来测试异步行为。
下面是一个使用 async 和 await 测试异步请求的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------- ------- - ---- ------------------------- ------ --------- ---- ------------------------------ ------ --- ---- -------- -------------- - ------- ------- ----- -------- ------ ----- -- -- - ----------- ---- --------------------------------------------------------- ----- ---------- -- ----------------------- ---------- --------------------------------------------------------------- ------------------------------ ------------------------------ ---
在这个测试用例中，我们渲染了 App 组件，然后使用 screen 对象查找了加载中的文本。接下来，我们使用 waitFor 函数等待组件加载完成，并使用 await 关键字等待异步函数完成。最后，我们检查加载中的文本是否已经消失以及是否显示了正确的文本。
mock 函数
在测试 React 组件时，有时我们需要测试组件内部的函数调用或者外部 API 的调用。为了避免测试中的副作用和不确定性，我们可以使用 Jest 提供的 mock 函数来模拟这些调用。
下面是一个模拟外部 API 调用的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------- ------- - ---- ------------------------- ------ --- ---- -------- ------ ----- ---- -------- ------------------- -------------- ---- ------- ---- ----- ----- -- -- - ----- ---- - - -------- ------ ------ -- ----------------------------- ---- --- ----------- ---- --------------------------------------------------------- ----- ---------- -- ----------------------- ---------- --------------------------------------------------------------- ------------------------------ ------------------------------ ---
在这个测试用例中，我们使用了 Jest 提供的 jest.mock 函数来模拟 axios 模块，使用 mockResolvedValue 函数模拟 get 方法的返回值。然后，我们测试了组件是否正确显示了从 API 中获取的数据。
总结
在本文中，我们介绍了 Jest 测试 React 组件的最佳实践，包括编写测试用例、深度渲染、异步测试和 mock 函数。使用这些技术能够帮助你写出高质量的测试代码，并提高项目的可靠性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66481b63d3423812e46a67fe