在前端开发中，Redux 已经成为了管理应用状态的标准。而在 Redux 中，异步 action 的使用也越来越普遍。但是，如何有效地测试异步 action 却是一个挑战。本文将介绍 Jest + Redux 中如何测试异步 action 的最佳实践。
为什么需要测试异步 action
在 Redux 中，action 是一个纯对象，而异步 action 可以被定义为一个返回函数的 action。这个函数可以使用 Redux Thunk 或者 Redux Saga 等中间件来处理异步操作。在异步操作中，我们可能会调用网络请求、定时器、Promise 等异步 API，这些操作都是不可预测的。因此，测试异步 action 可以帮助我们验证异步操作的正确性和可靠性，以及保证应用的稳定性。
Jest + Redux 测试异步 action 的最佳实践
1. 安装依赖
首先，我们需要安装 Jest 和 Redux 相关的依赖：
npm install --save-dev jest redux-mock-store redux-thunk
其中，redux-mock-store 用于模拟 Redux store，redux-thunk 用于处理异步操作。
2. 编写测试用例
我们可以先来看一个简单的异步 action：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --------- - -- -- -
------ ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- -------------------
---------- ----- --------------------- -------- ------------- ---
- ----- ------- -
---------- ----- --------------------- -------- ------------- ---
-
--
--这个异步 action 会先 dispatch 一个 FETCH_USER_REQUEST 的 action，然后调用 axios.get('/user') 请求用户数据，如果请求成功，会 dispatch 一个 FETCH_USER_SUCCESS 的 action，否则会 dispatch 一个 FETCH_USER_FAILURE 的 action。
接下来，我们可以编写一个测试用例来测试这个异步 action：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ ----- ---- --------
------ - --------- - ---- ------------
----- --------- - ----------------------------
-------------------
------------------- -------- -- -- -
----- ----- - --------------
----- -------- - - --- -- ----- ----- ---- --
------------- -- -
---------------------
----------------------
---
-------------- ------------------ ---- -------- ---- ---------- ----- -- -- -
----------------------------- ----- -------- ---
----- ----------------------------
----- ------- - -------------------
--------------------------------
------------------------------------------------------
------------------------------------------------------
---------------------------------------------
---
-------------- ------------------ ---- -------- ---- ------- ----- -- -- -
----- ------------ - -------- -------
------------------------------- ---------------------
----- ----------------------------
----- ------- - -------------------
--------------------------------
------------------------------------------------------
------------------------------------------------------
-------------------------------------------------
---
---这个测试用例包含了两个测试，分别测试了异步 action 成功和失败的情况。在测试异步 action 时，我们需要先创建一个 Redux store，并使用 redux-mock-store 来模拟一个 store，然后使用 jest.mock 来 mock 掉 axios 的实现，以便我们可以控制 axios.get 的返回值。在每个测试之前，我们需要清空 store 的 action 和 axios 的 mock 实现。
在测试异步 action 成功的情况时，我们使用 axios.get.mockResolvedValue 来模拟 axios.get 返回成功的情况，并使用 await store.dispatch(fetchUser()) 来触发异步 action。然后，我们可以使用 store.getActions() 来获取 store 执行的所有 action，然后验证 action 的 type 和 payload 是否正确。
在测试异步 action 失败的情况时，我们使用 axios.get.mockRejectedValue 来模拟 axios.get 返回失败的情况，并使用 await store.dispatch(fetchUser()) 来触发异步 action。然后，我们可以使用 store.getActions() 来获取 store 执行的所有 action，然后验证 action 的 type 和 payload 是否正确。
3. 结论
通过上面的例子，我们可以看到，在 Jest + Redux 中测试异步 action 的最佳实践包括以下几点：
- 使用 redux-mock-store 来模拟一个 store。
- 使用 jest.mock 来 mock 掉异步操作的实现，以便我们可以控制返回值。
- 在测试之前，清空 store 的 action 和异步操作的 mock 实现。
- 在测试异步 action 成功的情况时，使用 await store.dispatch() 来触发异步 action，并使用 store.getActions() 来获取 store 执行的所有 action，然后验证 action 的 type 和 payload 是否正确。
- 在测试异步 action 失败的情况时，使用 await store.dispatch() 来触发异步 action，并使用 store.getActions() 来获取 store 执行的所有 action，然后验证 action 的 type 和 payload 是否正确。
总结
在 Jest + Redux 中测试异步 action 可以帮助我们验证异步操作的正确性和可靠性，以及保证应用的稳定性。通过本文的介绍，我们可以了解 Jest + Redux 中测试异步 action 的最佳实践，包括如何使用 redux-mock-store 来模拟一个 store，如何使用 jest.mock 来 mock 掉异步操作的实现，以及如何在测试之前清空 store 的 action 和异步操作的 mock 实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c1e3e95b1f8cacd63233e