前言
在前端开发中，Redux 是一个非常流行的状态管理工具。但是在 Redux 中，异步 action 的测试是一个比较困难的任务。Mocha 是一个优秀的 JavaScript 测试框架，本文将介绍如何使用 Mocha 测试框架来测试 Redux 异步 action。
Redux 异步 action
在 Redux 中，异步 action 通常由两个步骤组成。第一步是触发一个异步操作，并在异步操作结束时得到一个异步返回值，这个异步返回值可以是一个 Promise 或者一个 thunk 函数。
-- -------------------- ---- -------
----- --------- - -- -- ----- -------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- --- -
---------- ----- --------------------- -------- --------- ---
-
--第二步是将异步返回值作为 payload 发送给 reducer。
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- ----------- ---- --
---- ---------------------
------ - --------- ----------- ------ ----- -------------- --
---- ---------------------
------ - --------- ----------- ------ ------ -------------- --
--------
------ ------
-
--Mocha 测试框架
Mocha 是一个功能丰富、灵活的 JavaScript 测试框架，可以在 Node.js 或浏览器中运行。Mocha 测试框架支持各种测试类型，包括单元测试、集成测试、功能测试等。
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal([1,2,3].indexOf(4), -1);
});
});
});上面的代码是一个简单的 Mocha 测试用例。我们只需要使用 describe、it 和 assert 等简单的方法，就可以非常方便地编写测试用例。
测试异步 action
在 Mocha 中测试异步 action 的过程与同步 action 有所不同。在同步 action 中，我们可以通过测试 action creator 返回的 action 是否符合我们的期望来测试它是否起作用。但在异步 action 中，测试将分为两个部分。第一部分测试触发异步操作和返回值是否正确，第二部分测试是否正确将返回值作为 payload 发送给 reducer。
-- -------------------- ---- -------
--------------------- ---------- -
-------------- --- ------------------ --- ------------------ --------- ----- ---------- -
----- ----- - --------------
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- - ----- ----- ---- - -
--
----- ----------------------------
------------------------------------ -----------------
---
---上面的测试代码中，我们创建了一个 mockStore，然后 dispatch 了一个 fetchUser 异步 action。为了保证测试覆盖率，我们需要测试是否已经 dispatch 了正确的 action。我们需要检查 dispatch 的 action 是否符合我们的期望值。
结论
在 Redux 中测试异步 action 是一个比较困难的任务，但是使用 Mocha 测试框架可以轻松地测试异步 action。通过编写简单的测试脚本，我们可以确保我们的异步 action 能够按照我们的预期正常工作。
示例代码
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ --------- ---- -------------
------ ------ ---- ---------
----- --------- - ----------------------------
----- --------- - -- -- ----- -------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- --- -
---------- ----- --------------------- -------- --------- ---
-
--
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- ----------- ---- --
---- ---------------------
------ - --------- ----------- ------ ----- -------------- --
---- ---------------------
------ - --------- ----------- ------ ------ -------------- --
--------
------ ------
-
--
--------------------- ---------- -
-------------------- -
--------------------
---
-------------- --- ------------------ --- ------------------ --------- ----- ---------- -
-------------------------- - ----- ----- ---- ---
----- ----- - --------------
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- - ----- ----- ---- - -
--
----- ----------------------------
------------------------------------ -----------------
---
-------------- --- ------------------ --- ------------------ --------- ----- ---------- -
-------------------------- - ------- --- ----------- --- ------- ---
----- ----- - --------------
----- --------------- - -
- ----- -------------------- --
- ----- --------------------- -------- ----- --- ------ -
--
----- ----------------------------
------------------------------------ -----------------
---
---
------------------- ---------- -
----------- ------------------ -------- ---------- -
----- --------- - - ----- - ----- ----- ---- - --
----- ------ - - ----- -------------------- --
----- --------- - ------------------ --------
--------------------------- - ----- - ----- ----- ---- -- ----------- ---- ---
---
----------- ------------------ -------- ---------- -
----- --------- - - ----- - ----- ----- ---- -- ----------- ---- --
----- ------ - - ----- --------------------- -------- - ----- ----- ---- - --
----- --------- - ------------------ --------
--------------------------- - ----- - ----- ----- ---- -- ----------- ----- ---
---
----------- ------------------ -------- ---------- -
----- --------- - - ----- - ----- ----- ---- -- ----------- ---- --
----- ------ - - ----- --------------------- -------- ----- --- ------ --
----- --------- - ------------------ --------
--------------------------- - ----- - ----- ----- ---- -- ----------- ------ ------ ----- --- ------ ---
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c5b819babaf620fb069de