在开发 Redux 应用时，我们常常需要测试 action 是否能够正确地触发 state 的更新。而 Jest 是一款常用的 JavaScript 测试工具，它不仅易于使用，而且与 React 生态系统完美结合。但是在测试 Redux 的过程中，有一些问题可能会出现，本文将探讨这些问题并提供解决方案。
问题一：无法测试异步 Action
在 Redux 应用中，异步 action 是极其常见的，他们通常用于发送网络请求或者其他与异步 I/O 相关的操作。但是在 Jest 中测试这些 action 时遇到了困难，在这里提供一种解决方案。
首先需要安装 redux-mock-store 和 redux-thunk，前者用于创造模拟的 store，后者用于处理异步 action。
--- ------- ---------- ---------------- -----------
接下来是一个异步 action 的示例代码：
------ ----- ---- --------
------ ----- --------- - -- -- -
------ ----- ---------- -- -
--- -
----- -------- - ----- ----------------------------------------------------------
---------- ----- --------------------- -------- ------------- ---
- ----- ------- -
---------- ----- --------------------- -------- ------------- ---
-
--
--为了在 Jest 中测试该 action，首先需要创建一个模拟的 store，然后将其传递给 action。
------ ------------------ ---- -------------------
------ ----- ---- --------------
----- ----------- - --------
----- --------- - --------------------------------
----- ----- - --------------
--------------------- -- -- -
----------- ------------------ ----- ---------- --- ------ ----- -- -- -
----- --------------- - -
- ----- --------------------- -------- - --- -- ----- ------- ------- - -
--
----- ----------------------------
----------------------------------------------------
---
---在上述代码中，首先创建一个空的 store，然后在测试中向该 store 分发异步 action，最后判断 action 分发出去的结果是否符合预期。这种方式通过模拟 Store 解决了回调函数的问题，而 redux-thunk 则允许我们将 action 和 dispatch 结合在一起，以允许创建 action creators，使它们能够返回一个函数而不是一个对象。
问题二：无法测试 action 与 Reducer 的交互
当我们测试 action 时，我们通常希望它与相关的 reducer 以某种特定方式交互，但是在 Jest 中实现这个特定方式可能并不容易。以下是一个解决方案：
首先，创建相关的 action 和 reducer：
-- ----------
------ ----- ---------------- - -- -- --
----- --------------------
---
-- ----------
----- ------------ - -
------ --
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- --------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-下面是一个测试用例，测试 action 与 reducer 是否以正确的方式进行交互：
------ -------------- ---- ------------
------ - ---------------- - ---- ------------
-------------------------- -- -- -
---------- --------- --------- -- -- -
----- --------- - - ------ - --
----- --------------- - -------------------
----- ------------- - - ------ - --
-------------------------------- -----------------------------------------
---
---这个测试用例创建了一个模拟的 prevState 和一个 incrementAction，然后测试 reducer 是否能够正确地更新状态。通过这种方式，测试 action 和 reducer 的交互已经成为了可能。
结论
测试 Redux 应用是非常重要的，它可以帮助我们在开发过程中发现错误并且简化了迭代周期。在 Jest 中测试 Redux 应用的过程中，也会面临一些问题，但是上述的方法可以帮助我们解决这些问题。现在，您已经准备好测试 Redux 应用的 action 和 reducer 了！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672440402e7021665e12c72e