在 Jest 中测试带有 Redux Thunk 的异步操作
在前端领域中，测试是不可避免的一个环节。针对 Redux Thunk 异步操作的测试也是必须的一步。下面介绍在 Jest 中测试带有 Redux Thunk 的异步操作的具体步骤。
- 安装 Jest 和相关依赖
如果你已经在项目中使用了 Jest，可以跳过这一步。如果没有，需要先安装 Jest。在命令行中输入以下代码安装 Jest：
npm install --save-dev jest @types/jest
为了使测试更简单且易于理解，我们推荐使用 Enzyme、redux-mock-store 和 redux-thunk 这些库。输入以下命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16 redux-mock-store redux-thunk
- 安装 Jest 配置文件
在项目根目录下新建文件 jest.config.js，并输入以下代码：
-- -------------------- ---- -------
-------------- - -
--------------------- ------ -------
----------------- -
----------- -------------------
--
------------------- -----------------------------------------
----------------------- -
--------------------------
-------------------
--
---------- ------------------------------------------------------------
---------- -
------------------ -------------
--
------------------------ -
----------------------------------------------------------------------
--
--如果有需要，可以根据自己的项目进行修改。
- 编写测试用例
我们将使用 Enzyme、redux-mock-store 和 redux-thunk 来编写测试用例。先来编写一个简单的 Redux Thunk 异步操作：
-- -------------------- ---- -------
-- --------------
------ ----- --------- - -- -- -
------ ---------- --------- -- -
---------- ----- -------------------- ---
-------------
-------------- -- ----------------
---------- --
----------
----- ---------------------
-------- -----
--
-
------------ --
----------
----- ---------------------
-------- ------
--
--
--
--接下来，我们将对这个异步操作进行测试。
-- -------------------- ---- -------
-- -----------------------------
------ -------------- ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - ----------------------------
------------------- -------- -- -- -
--- ------
------------- -- -
----- - ------------
---
-------------- ------------------ -------- -- -- -
----------------------------
----- ------- - -------------------
-------------------------- ----- -------------------- ----
---
-------------- ------------------ ------ ---- ---- -------- -- ------------ -- -- -
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- -- --
--
------------ - ---------- --
-----------------
----- --------------------------------
--
--
------ ----------------------------------- -- -
----- ------- - -------------------
-----------------------------------------
---
---
-------------- ------------------ ------ ---- ---- -------- ------- -- -- -
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- -------- ------ --
--
------------ - ---------- -- ----------------------- ---------
------ ----------------------------------- -- -
----- ------- - -------------------
-----------------------------------------
---
---
---这里涵盖了多种测试场景：请求开始时 dispatch「FETCH_DATA_REQUEST」action；请求成功时 dispatch「FETCH_DATA_SUCCESS」action；请求失败时 dispatch「FETCH_DATA_FAILURE」action。我们使用了 Jest 自带的 expect 断言方法。
- 运行测试
在命令行中输入以下命令以运行测试：
npm test
如果测试全部通过，则输出如下信息：
-- -------------------- ---- -------
---- -----------------------------
--------- ------
- ---------- ------------------ ------ -- ---
- ---------- ------------------ ------ ---- ---- -------- -- ---------- -- ---
- ---------- ------------------ ------ ---- ---- -------- ----- -- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -- --------- - -
--- --- ---- ------ -------- ----------------------------------------------------------- -- ----- --至此，我们已经成功地在 Jest 中测试带有 Redux Thunk 的异步操作。
总结
本文介绍了在 Jest 中如何测试带有 Redux Thunk 的异步操作。通过使用 Enzyme、redux-mock-store 和 redux-thunk，我们可以更方便地编写和运行测试用例。测试是前端开发中不可或缺的一环，是保证代码质量、提高开发效率的关键步骤。有了本文的指导，相信读者们能够更加轻松地进行测试工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dec925f6b2d6eab39e8e98