Redux-Saga 是一个 Redux 中间件，它通过将 Generator 函数与 Redux Store 联结，帮助我们更好地管理和控制应用程序的副作用。然而，当代码逐渐增大时，为了保证应用程序的质量和稳定性，测试也是必不可少的。本文将会重点介绍如何使用 Enzyme 进行 Redux-Saga 测试。
环境搭建
在开始之前，需要对项目环境进行搭建。首先安装 enzyme 和 enzyme-adapter-react-16 依赖：
npm install enzyme enzyme-adapter-react-16 --save-dev
然后在项目中初始化 Enzyme 工具：
// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });最后，需要在项目配置或参数中添加 BABEL_ENV=test，以确保模块成功地被 Babel 进行预处理：
-- -------------------- ---- -------
------- -
------------------ --------
------------------------- -
--------------------------
------------------
--
---------- -
----------- -------
------------ ------
-
-功能测试
在编写 Redux-Saga 测试之前，需要先编写 Redux 相关文件以及 Saga 文件。这里以一个简单的登录验证为例来说明：
Redux 文件
-- -------------------- ---- -------
-- -------------------------
----- ------------ - -
---------------- ------
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ----------------
------ -
---------
---------------- -----
--
---- -----------------
------ -
---------
---------------- ------
--
--------
------ ------
-
-
-- -------------------------
------ ----- ------------ - -- -- --
----- ----------------
---
------ ----- ------------- - -- -- --
----- -----------------
---
-- ---------------------------
------ ----- ------- - ----- -- ---------------------------Saga 文件
-- -------------------- ---- -------
-- -----------------
------ - ------ ---- ------- ---------- - ---- ---------------------
------ - ------------- ------------- - ---- ------------------------
------ - ------- - ---- --------------------------
--------- -------------- -
----- -----------
----- ---------------------
-
--------- ------------- -
----- --------------- - ----- ----------------
-- ------------------ -
----- --------------------
-
-
--------- ------------- -
----- ---------------------------- --------------
-
--------- ------------ -
----- --------------------------- -------------
-
------ ------- --------------- --------------
-- ------------------
------ - ---- - ---- ---------------------
------ ---- ---- ---------
------ ------- --------- ---------- -
----- -----------
-测试 Saga 步骤：
- 创建 Saga，使用 apply 和 put 等 Saga 基本方法，按照具体业务编写处理流程和调用方式。
- 执行 Saga test 方法，触发 Generator 函数，获取产生的 Iterator 对象。
- 在 Iterator 对象中执行 next 方法，触发 Saga 的 yield 语句，获取 Saga 的返回结果，判断返回结果是否符合预期。
下面是一个用于测试 Saga 文件的示例代码：
-- -------------------- ---- -------
-- --------------------------------
------ - ----- - ---- ---------------------
------ - ------ - ---- ---------------------
------ - -------- - ---- -----------------------
------ - ------------ ------------- ----------- ----------- - ---- ----------
------ - ------- - ---- -----------------------------
------ - ------------- ------------- - ---- ---------------------------
-------------- ---- ------- -- -- -
---------- ------ ----- ------ -- ---- -- --- --------------- -- -- -
----- --------------- - ------
---------------------
-------
----------------
----------------------
--------------------
-------
----------
---
---------- --- ------ ----- ------ -- ---- -- --------------- -- -- -
----- --------------- - -----
---------------------
-------
----------------
----------------------
----------
---
---------- ------ ------ -------- -- -- -
----------------------
-------
------------ ----
-------
---------------------
-------
----------
---
---------- ----- ----- -------- -- -- -
--------------------
-------
---------------------------- ------------
-------
----------
---
---------- ----- ------ -------- -- -- -
---------------------
-------
----------------------------- -------------
-------
----------
---
---界面测试
在编写应用程序时，经常会发现使用 Enzyme 对生成的 React 组件进行渲染测试是非常方便和重要的。下面是一个简单的示例：
-- -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ --------- ---- -------------
--------------- - -
--------- --------------------------
--
-------- ------- -------- -- -
----- ------------ - - -- -
-------------------
----- -------- - ---------------------------------
----- -------- - ---------------------------------
---------- --------- -------- ---
--
------ -
----- ------------------------
------ ------------------------------------
------ ----------- --------------- ------------- --
--- --
------ ------------------------------------
------ --------------- --------------- ------------- --
--- --
------- ----------------- -----------
-------
--
-
------ ------- ------我们进行渲染测试的方式一般有两种：深度渲染（shallow）和浅层渲染（mount）。
浅层渲染测试
在进行组件级测试时，浅层渲染是尤为关键的。浅层渲染只渲染了组件本身，而不渲染其子组件。如需测试子组件，需要使用深度渲染测试。
下面是 Login 组件进行浅层渲染测试的代码：
-- -------------------- ---- -------
-- --------------------------------------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- -----------
--------------- --------- ---- ------- -- -- -
----------- ------ --- ------ -------- -- -- -
----- ------- - ------------ ------------ -- --- ----
----------------------------------------------
--------------------------------------------------------------
---
--------- -------- ---- ---- ---- -- ----------- -- -- -
----- ------------ - ----------
----- -------------- - ----------
----- ------- - ------------ ----------------------- ----
--------------------------------------- - -------------- ---
-------------------------------------------
--------- ---
--------- ---
---
------------------------------------------
---
---深度渲染测试
深度渲染测试在 React 的生命周期上进行测试，继承了父组件的渲染内容以及其子组件内容。因此，深度渲染测试不能单独使用，需要在浅层渲染测试失败时，进一步进行排查问题。
下面是一个组件进行深度渲染测试的代码：
-- -------------------- ---- -------
-- ------------------------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- ---------
------------- --------- ---- ------- -- -- -
----------- --- ----------- -- -- -
----- ------- - ------------ ----
-------------------------------
---
---总结
本文介绍了如何使用 Enzyme 对 Redux-Saga 中间件进行测试的全过程，从环境搭建到功能测试和界面测试的编写，具有一定的指导意义。使用 Enzyme 进行自动化测试的技术，可以有效减少手动测试的工作量，更快地发现和修复错误。希望读者在阅读本文的过程中，能够对 Redux-Saga 框架以及 Enzyme 规范和细节有更深入的认知和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb0d475ad90b6d041e9165