随着 React Native 的流行，越来越多的开发者开始使用 Redux 来管理应用的状态。但是，测试 Redux 的异步 action 是一项挑战，因为它们通常涉及到 API 调用和异步代码。在这篇文章中，我们将介绍如何使用 Jest 和 redux-mock-store 来测试 Redux 的异步 action。
redux-mock-store 简介
redux-mock-store 是 Redux 官方提供的一个用于测试 Redux 的中间件库。它允许你模拟 Redux store 并测试异步 action 的行为。redux-mock-store 的主要功能是模拟 Redux 的 store 对象，从而在测试中模拟 Redux 的行为。
安装 redux-mock-store
在使用 redux-mock-store 之前，我们需要先安装它。可以使用 npm 或者 yarn 来安装：
npm install --save-dev redux-mock-store
yarn add --dev redux-mock-store
编写测试
在编写测试之前，我们需要先编写一个异步 action。在这个例子中，我们将创建一个名为 fetchUser 的异步 action，它将从一个 API 中获取用户信息，并将结果存储在 Redux store 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- --------- - -------- -- -
------ ---------- -- -
---------- ----- ------------------ ---
-----
------------------------------------------------------------
---------------- -- -
----------
----- -------------------
-------- --------------
---
--
-------------- -- -
----------
----- -------------------
-------- --------------
---
---
--
--在上面的代码中，fetchUser 是一个异步 action，它返回一个函数。该函数接受 dispatch 函数作为参数，并在 API 调用成功或失败时分发相应的 action。
现在，让我们来编写测试。我们将首先创建一个 mock store，然后将其传递给异步 action。接下来，我们将使用 Jest 的 async/await 功能来等待异步操作完成，然后断言 Redux store 中的状态是否正确。
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ ----- ---- --------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
------------------- -------- -- -- -
---------- ----- ---- ------ ----- -- -- -
----- ------ - --
----- -------- - - --- -- ----- ----- ---- --
-- -- --- --
--------- - ---------- -- ----------------- ----- -------- ----
-- -- ---- -----
----- ----- - --------------
-- ---- ------
----- ----------------------------------
-- -- ----- --------
----- ------- - -------------------
----- --------------- - - ----- --------------------- -------- -------- --
-------------------------------------------
---
---在上面的代码中，我们首先模拟了 axios.get 方法，然后创建了一个 mock store。接下来，我们调用了 fetchUser 异步 action，并使用 async/await 等待异步操作完成。最后，我们断言 Redux store 中的状态是否正确。
总结
在本文中，我们介绍了如何使用 Jest 和 redux-mock-store 来测试 Redux 的异步 action。我们首先介绍了 redux-mock-store 的基本用法，然后编写了一个异步 action 的测试，并使用 async/await 等待异步操作完成。这篇文章的目的是帮助开发者更好地理解 Redux 的异步 action，以及如何使用 redux-mock-store 来测试它们的行为。我希望这篇文章能够帮助你更好地理解 Redux 的异步 action，并为你的测试工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651004b895b1f8cacd8ac137