React + Redux 是目前前端开发中最流行的技术组合之一，如何进行高效、完善的测试是每个前端开发者的必修课程。本文将介绍使用 Jest 和 Enzyme 进行 React + Redux 应用的测试的方法，帮助您更好地了解如何进行测试，并给出实际的示例代码。
测试环境搭建
首先，我们需要搭建测试环境。创建一个新的 React + Redux 应用，并安装 Jest 和 Enzyme。
npm install jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer enzyme enzyme-adapter-react-16 --save-dev
在项目中创建一个 __tests__ 目录，用于存放测试文件。
测试组件
单元测试
单元测试是测试组件的最基本形式。在这种测试中，我们会测试单个组件的行为，而不会涉及到应用程序的其余部分。
示例测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------------------
----------------- ----------- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
----------- ---------- -- -- -
----------------------------------
---
-------------- --- ----- ---- ------ -- --------- -- -- -
----- ------------ - ---------------------------------
-------------------------------
---------------------------------------
---
-------------- --- ----- ---- ------ -- --------- -- -- -
----- ------------ - ---------------------------------
-------------------------------
----------------------------------------
---
---在上面的测试中，我们创建了一个 Counter 组件，并使用 shallow 函数包装它。然后，在 beforeEach 块中初始化，以确保在每个测试之前都会运行。我们进行了三个测试：
- 确保组件可以正确渲染。
- 确保增加按钮可以增加计算器的计数器。
- 确保减少按钮可以减少计数器的计数器。
其中，toMatchSnapshot 函数用于创建快照。这将记录测试组件的外观和行为，并以后供比较。当测试执行时，快照将与实际组件比较。如果它们不完全匹配，则测试将失败。
集成测试
集成测试是测试整个组件层次结构的形式。在集成测试中，我们会测试应用的各个组件之间的协作方式。
示例测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ ----- ---- -----------
------ ------- ---- ------------------------
------ --- ---- --------------------
------------- ----------- -- -- -
--- --------
------------- -- -
------- - ------
--------- --------------
---- --
-----------
--
---
----------- ---------- -- -- -
----------------------------------
---
----------- --- ------- ----------- -- -- -
----------------------------------------------
---
-------------- --- ----- ---- ------ -- --------- -- -- -
----- ------------ - ---------------------- -------------
-------------------------------
----------------------------- ------------------------------
---
-------------- --- ----- ---- ------ -- --------- -- -- -
----- ------------ - ---------------------- -------------
-------------------------------
----------------------------- -------------------------------
---
---在上面的测试中，我们包装了整个 App 组件，以确保 React 组件层次结构中所有的组件都能够正确地渲染。我们进行了四个测试：
- 确保整个应用能够正确渲染。
- 确保计数器组件被正确地渲染到应用中。
- 确保增加按钮可以增加计数器组件的计数器。
- 确保减少按钮可以减少计数器组件的计数器。
测试 Redux
Redux 是一个重要的状态管理工具。在应用中使用 Redux，我们也需要测试状态管理器。
示例测试代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ------- ---- --------------
----------------- --------- -- -- -
--- ------
------------- -- -
----- - ---------------------
---
---------- ------ ----------- -- -- -
---------------- ----- ----------- ---
---------------------------------------
---
---------- ------ ----------- -- -- -
---------------- ----- ----------- ---
----------------------------------------
---
---在上面的测试中，我们创建了一个 Redux 存储，并为其提供我们的 reducer 函数。然后，我们手动发出 INCREMENT 和 DECREMENT 操作，并查看状态管理器是否正确地更新。
测试 API 调用
在应用中使用 API 调用非常常见。我们需要确保通过 API 调用获取的数据可以正确地渲染到组件中。
示例测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ---------
-------------------
------------- ----------- -- -- -
----------- ----- -- -------------------- -- -- -
----- ---- - - ----- -- --- -- ----- ----- --- -- - --- -- ----- ----- --- -- --
----------------------------------
----- ------- - ---------- ----
-------------------------------------------------
---
---在上面的测试中，我们使用 jest.mock 函数模拟了 axios.get 方法，并且设定它的返回。在 App 组件在挂载时，数据应该已经被成功获取并渲染到组件中。
结论
在本文中，我们了解了如何使用 Jest 和 Enzyme 进行 React + Redux 应用的测试。我们为单元测试、集成测试、Redux 测试和 API 测试提供了示例代码。通过这些技术，我们可以更好地测试应用程序，从而发现并解决潜在的错误，并确保应用程序能够正确地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e4bcc8be2a908450d5f7a