单元测试是软件开发中的一个重要环节，它可以有效地保证代码质量和功能正确性。在 React 中进行单元测试也是非常重要的，本文将介绍如何在 React 中进行单元测试。
前置知识
在学习本文内容之前，你需要掌握以下知识点：
- React 基础知识
- Jest 测试框架基础知识
Jest
Jest 是 Facebook 开发的一个 JavaScript 测试框架，它可以用来进行单元测试、集成测试、UI 测试等。Jest 具有速度快、易用、内置断言等特点，是 React 生态系统中非常流行的一个测试框架。
安装 Jest
首先，我们需要安装 Jest：
npm install --save-dev jest
测试组件
在 React 中，我们最常见的需要测试的是组件。下面是一个简单的组件示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
------- ------------------------
-------------
---------
--
-
------ ------- -------下面我们来写一个测试这个组件的测试用例。首先我们需要创建一个名为 Button.test.js 的文件，文件名格式为 <组件名>.test.js。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- -----------
---------------- ----------- -- -- -
------------- ------ ------- -- -- -
----- ----- - ------ ----
----- - --------- - - -------
------- ------------- ---
--
---------------------------------------------
---
----------- ------- ------- ---- --------- -- -- -
----- ------- - ----------
----- ----- - ------ ----
----- - --------- - - -------
------- ------------- ----------------- ---
--
----------------------------------
-----------------------------------
---
---上面这个示例代码包含了两个测试用例：
- 测试渲染按钮文本是否正确
- 测试点击按钮是否会调用
onClick事件处理函数
在这里我们用到了 render 和 fireEvent 方法，这两个方法都是 @testing-library/react 库中提供的帮助我们测试组件的工具方法。
测试 Redux 状态
除了组件，我们还需要测试 Redux 状态的变化。下面是一个示例的 Redux Reducer 代码：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
------ ------- ---------------我们可以通过 Jest 来测试这个 Reducer。
-- -------------------- ---- -------
------ -------------- ---- ------------
-------------------------- -- -- -
------------ ------ --- ------- ------- -- -- -
-------------------------------- -------------- ------ - ---
---
------------ ------ ----------- -- -- -
----- ------ - - ----- ----------- --
----------------------- ------ - -- ------------------ ------ - ---
---
------------ ------ ----------- -- -- -
----- ------ - - ----- ----------- --
----------------------- ------ - -- ------------------ ------ - ---
---
---通过这个测试，我们可以验证 Reducer 是否按照预期工作。
测试异步请求
在实际业务中，我们经常需要测试异步请求的正确性。为此，我们可以使用 Jest 的异步测试工具。
下面是一个示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- -------------- ------------------- --------------- ----- --- --- ------- ------ ----- -- -- - ----- ---- - - -------- -- ----- ------ -- -- ----------------------------- ---- --- ----- ------------ - ----- ------------ ----------------------------------- ----------------------------------------------------------------------- ---
我们需要使用 jest.mock 方法来模拟 axios，然后使用 mockResolvedValue 方法来设定返回值。在测试用例中，我们调用我们写的 fetchData 函数，然后验证是否返回符合预期的数据，并且是否调用了 axios.get 方法。
结论
在本文中，我们介绍了如何在 React 中进行单元测试并提供了示例代码。通过掌握单元测试的方法，我们可以有效地提高代码质量并保证功能正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a1dc8d91dce0dc87ee109