Redux-thunk 是 Redux 的一个中间件，它允许 action 创建函数返回一个函数而不是一个 action 对象，这样就可以在 action 中执行异步操作。但是，在测试异步 action 时，我们需要使用 Enzyme 来模拟组件和 Redux store。
在本文中，我们将介绍如何使用 Enzyme 测试 Redux-thunk 异步 action，并提供详细的示例代码。
准备工作
在开始测试之前，我们需要安装以下依赖项：
- Enzyme
- enzyme-adapter-react-16
- redux-mock-store
首先，我们需要创建一个 Redux store，并将其传递给 Enzyme 的 mount 函数，以便我们可以测试组件与 Redux store 的交互。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ----- ---- --------------
----- ------------ - ---
----- --------- - ------------------------
----- ----- - ------------------------
----- ------- - ------
--------- --------------
------------ --
-----------
--其中，MyComponent 是我们要测试的组件。
接下来，我们需要创建一个 mock store，以便我们可以在测试中使用它来分发 action。我们可以使用 redux-mock-store 库来创建一个 mock store。
import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; const middlewares = [thunk]; const mockStore = configureMockStore(middlewares);
现在，我们准备好测试我们的 Redux-thunk 异步 action 了。
测试异步 action
我们将编写一个测试用例，以确保异步 action 正确地将数据放入 store 中。我们将使用 redux-mock-store 库来模拟 store，并使用 axios 库来模拟 API 请求。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
-------------------
------------------- -------- -- -- -
---------- ----- ---- --- -------- ------- -------- -- -- -
----- ---- - - ----- ----- ---- --
----------------------------------
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- ---- --
--
----- ----- - --------------
------ ----------------------------------- -- -
----------------------------------------------------
---
---
---在上面的代码中，我们使用 jest.mock 来模拟 axios 库的行为，并使用 mockResolvedValue 方法来指定 API 请求返回的数据。然后，我们创建了一个 mock store，并使用 store.dispatch 方法来分发 fetchData action。最后，我们使用 expect 方法来确保 store.getActions() 返回了我们期望的 action。
结论
在本文中，我们介绍了如何使用 Enzyme 测试 Redux-thunk 异步 action。我们使用了 redux-mock-store 库来创建一个 mock store，并使用 axios 库来模拟 API 请求。我们还提供了详细的示例代码，以便您可以在自己的项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d257de1dcc5c0fa395477