Redux 是一个流行的 JavaScript 应用程序状态管理库。在应用程序中使用 Redux，可以更好地管理应用程序的状态和数据流。但是，Redux 应用程序的异步操作可以使测试变得困难。本文将介绍如何使用 Chai 和 Mocha 进行 Redux 应用程序的异步操作测试。
异步操作
Redux 应用程序中的异步操作包括如下内容：
- 从服务器获取数据
- 发送数据到服务器
- 与异步服务交互
- 延迟操作
Redux 通过使用中间件来处理异步操作。大多数 Redux 应用程序使用 Redux Thunk 作为中间件。Redux Thunk 允许在 Redux 动作创建函数中返回函数。这些函数可以使用异步操作进行状态更新。
但是，异步操作可以使测试变得困难。测试必须等待异步操作完成才能运行。在本文中，我们将使用 Chai 和 Mocha 为 Redux 应用程序编写异步操作测试。
安装
首先，您需要在项目中安装 mocha 和 chai：
npm install --save-dev mocha chai
接下来，您需要安装 chai-as-promised。这个库添加了支持异步断言的语法。异步断言是指使测试等待异步操作完成后再运行测试的技术。
npm install --save-dev chai-as-promised
最后，您需要安装 redux-mock-store。它是 Redux 的内存存储。您可以使用该存储来测试 Redux 动作和异步操作。
npm install --save-dev redux-mock-store
示例应用程序
要测试 Redux 应用程序的异步操作，我们需要一个示例应用程序。我们将使用 Redux Thunk 中间件来在应用程序中进行异步操作。下面是我们的示例应用程序的代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----- ---- --------
----- ------------ - -
-------- ------
------ ---
------ --
--
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ----------------- - -- -- -
------ -
----- -------------------
--
--
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
--
--
----- ----------------- - ----- -- -
------ -
----- --------------------
-------- -----
--
--
----- -------- - -- -- -
------ --------------------------------------------------------
--
----- ---------- - -- -- -
------ ------------------ -
------------------------------
----------
-------------- -- -
----- ----- - ---------------------- -- ---------
-----------------------------------
--
------------ -- -
-------------------------------------------
---
--
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- ----
--
---- --------------------
------ -
-------- ------
------ ---------------
------ --
--
---- --------------------
------ -
-------- ------
------ ---
------ --------------
--
--------
------ ------
-
--
----- ----- - -------------------- ------------------------
------ ------- ------
------ - ---------- --测试异步操作
下面我们将介绍如何使用 Chai 和 Mocha 测试 Redux 应用程序的异步操作。
测试框架
首先，您需要编写测试框架。测试框架定义了您要运行的测试。
-- -------------------- ---- -------
------ - ------ - ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ ---- ---- -------
------ - ---------- - ---- ----------
----- ----------- - --------
----- --------- - --------------------------------
--------------- ------- -- -- -
------------ -- -
----------------
---
----------- ------------------- ---- -------- ----- --- ---- ------ -- -- -
--------------------------------------------
--------------
----------- -
------ -- --- - -- - --- - --
---
----- --------------- - -
- ----- --------------------- --
- ----- ---------------------- -------- --- -- -
--
----- ----- - ----------- ------ -- ---
------ ------------------------------------ -- -
----------------------------------------------------------
---
---
---该框架使用 describe 和 it 函数来定义测试。在该示例中，我们正在测试 fetchUsers 函数。
在测试之前，我们使用 afterEach 和 nock.cleanAll 函数来清除模拟请求。
在测试中，我们首先定义模拟请求。使用 expectedActions 数组，我们定义了我们要测试的预期操作。
接下来，我们创建了一个 Redux 存储的模拟。此模拟存储将用于测试。
最后，我们使用 store.dispatch 调用 fetchUsers 函数。使用 then 函数，我们等待异步操作完成，并将预期操作与存储的操作进行比较。
测试功能
测试异步操作的第一部分是测试应用程序中使用的异步功能。在我们的示例应用程序中，我们使用了 axios 库来获取数据。我们将测试 axios 的用法是否正确。
-- -------------------- ---- -------
----------- ----- ---- ------ ----------- -- -- -
--------------------------------------------
--------------
----------- -
------ -- --- - -- - --- - --
---
------ ------------------------ -- -
-------------------------------------- --- - -- - --- - ----
---
---在该测试中，我们使用 nock 库进行模拟请求。我们使用 reply 函数定义了请求的响应。接下来，我们使用 getUsers 函数来获取我们的数据。最后，我们使用 then 函数来比较响应。
测试 Redux 动作
接下来，我们将测试 Redux 动作。我们将创建一个存储的模拟，并调用我们要测试的动作。
-- -------------------- ---- -------
-------------- ------------------- ----- ---------- --- --------- -- -- -
----- ----- - ----------- ------ -- ---
----- --------------- - -
- ----- ------------------- --
- ----- -------------------- -------- --- -- -
--
------ ------------------------------------ -- -
----------------------------------------------------------
---
---在这个例子中，我们创建了一个模拟存储，调用了 fetchUsers 函数，并比较了预期操作和存储操作。
测试 Redux 异步操作
最后，我们将测试 Redux 应用程序中的异步操作。为了测试异步操作，我们需要等待异步操作完成后再进行比较操作。
-- -------------------- ---- -------
----------- ------------------- ---- -------- ----- --- ---- ------ -- -- -
--------------------------------------------
--------------
----------- -
------ -- --- - -- - --- - --
---
----- --------------- - -
- ----- --------------------- --
- ----- ---------------------- -------- --- -- -
--
----- ----- - ----------- ------ -- ---
------ ------------------------------------ -- -
----------------------------------------------------------
---
---在我们的示例中，我们使用 nock 库进行模拟请求。我们使用 expectedActions 数组定义了我们要测试的预期操作。
我们使用 store.dispatch 调用 fetchUsers 函数。使用 then 函数，我们等待异步操作完成，并将预期操作与存储的操作进行比较。
结论
测试 Redux 应用程序的异步操作需要特殊的技术。在本文中，我们介绍了如何使用 Chai 和 Mocha 进行 Redux 应用程序的异步操作测试。
我们使用 Redux Thunk 中间件来进行异步操作。我们使用 nock 库进行模拟请求。我们使用 redux-mock-store 库来模拟 Redux 存储。我们使用异步断言来等待异步操作完成。
我们将所有这些技术结合起来，编写了测试框架，测试功能，测试 Redux 动作和测试 Redux 异步操作。
如果您正在使用 Redux 或即将开始使用它，请测试异步操作。异步操作可能会导致错误，并使调试变得困难。测试可以帮助您及时检测和修复这些错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728951a2e7021665e20c50b