在 Web 应用程序中，Redux-thunk 已经成为了处理异步操作的标准方法。与其他异步库相比，Redux-thunk 提供了一个更加统一的方式来管理异步操作，并且可以轻松地与 Redux Store 集成。在本文中，我们将探讨如何使用 Jest 测试与 Redux-thunk 配合的异步代码。
什么是 Redux-thunk？
Redux-thunk 是一个 Redux 的中间件，它允许我们编写异步的 action creator。它的工作原理是在 Redux Store 中添加一个 thunk 属性，这个属性是一个函数，它接收 dispatch 和 getState 两个参数。在这个函数中，我们可以编写异步操作并在完成后再分发 action。这个 action 可以是同步的，也可以是异步的。
如何使用 Redux-thunk？
首先，我们需要在 Redux Store 中添加 Redux-thunk 中间件。在创建 Store 的时候，我们可以使用 applyMiddleware 函数将 Redux-thunk 添加到中间件列表中。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));然后，我们可以编写异步操作的 action creator。这些函数应该返回一个函数，这个函数接收 dispatch 和 getState 两个参数。在这个函数中，我们可以编写异步操作，并在完成后再分发 action。例如，下面是一个获取用户信息的 action creator：
-- -------------------- ---- -------
------ ----- ------------- - -------- -- -
------ ---------- --------- -- -
---------- ----- ------------------------- ---
-----------------------------
-------------- -- ----------------
---------- -- -
---------- ----- -------------------------- -------- ---- ---
--
------------ -- -
---------- ----- -------------------------- -------- ------------- ---
---
--
--在这个例子中，我们首先分发了一个 FETCH_USER_INFO_REQUEST 的 action，表示正在获取用户信息。然后，我们使用 fetch 函数获取用户信息，并在完成后再分发 FETCH_USER_INFO_SUCCESS 或 FETCH_USER_INFO_FAILURE 的 action。这些 action 将被 reducer 处理，并更新 Redux Store 中的状态。
如何使用 Jest 测试 Redux-thunk？
在测试 Redux-thunk 时，我们需要测试 action creator 中的异步操作。我们可以使用 Jest 提供的 mock 函数来模拟异步操作，并断言 action 是否被正确地分发。
例如，我们可以使用 Jest 提供的 jest.fn() 函数来模拟 fetch 函数，并返回一个 Promise 对象：
global.fetch = jest.fn().mockImplementation(() => {
return Promise.resolve({
json: () => Promise.resolve({ id: 1, name: 'John Doe' }),
});
});然后，我们可以编写测试用例来测试 fetchUserInfo 函数是否正确地分发了 action：
-- -------------------- ---- -------
------ -------------- ---- -------------------
------ ----- ---- --------------
------ - ------------- - ---- ----------------
----- --------- - ------------------------
----------------------- -- -- -
---------- ----- ---- ------ -- -- -
----- ----- - --------------
----- --------------- - -
- ----- ------------------------- --
- ----- -------------------------- -------- - --- -- ----- ----- ---- - --
--
------ ---------------------------------------- -- -
----------------------------------------------------
---
---
---在这个例子中，我们使用了 redux-mock-store 库来创建一个 Store 的模拟对象。然后，我们调用 fetchUserInfo 函数，并使用 Jest 的 expect 函数断言 action 是否被正确地分发。
总结
在本文中，我们介绍了 Redux-thunk 的工作原理，并演示了如何使用 Jest 测试 Redux-thunk 中的异步操作。使用 Redux-thunk 可以让我们更加轻松地管理异步操作，并且可以与 Jest 集成来测试异步操作的正确性。如果您正在开发 Web 应用程序并使用 Redux-thunk，那么本文将为您提供有价值的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d4430d3423812e4b4a0ee