在 Jest 测试 React + Redux + Thunk
在前端开发中，React + Redux + Thunk 成为了一组强大的技术组合，帮助我们开发出高效、稳定、优雅的 Web 应用程序。但是，我们需要对这些组合进行测试以确保应用程序的质量和稳定性。在本篇文章中，我们将学习如何使用 Jest 进行 React + Redux + Thunk 应用程序的测试。
准备工作
在开始测试之前，我们需要安装一些必要的工具和库。首先，我们需要安装 Jest，使用 npm 命令：
--- ------- ---------- ----
接下来，我们需要安装 React、Redux、react-redux 和 redux-thunk：
--- ------- ------ ----- ----- ----------- -----------
在安装完成后，我们可以开始编写测试代码了。
测试 Redux Action
我们从最简单的部分开始：测试 Redux Action。Redux Action 是一个纯函数，负责返回一个 Action 对象，该对象描述了要执行的操作类型以及将要传递给 Action 的数据。
我们以一个简单的例子开始。假设我们有一个 Counter 应用程序，包括一个 Action——INCREMENT_COUNTER，该 Action 的作用是使计数器的值加 1。以下是 Action 的代码：
------ ----- ----------------- - --------------------
------ -------- ----------- -
------ -
----- -----------------
--
-我们可以编写一个简单的测试用例来测试这个 Action 是否返回了正确的 Action 对象：
------ - ---------- ----------------- - ---- ------------
------------------- -- -- -
---------- ------ -- ------ -- --------- --- --------- -- -- -
----- -------------- - -
----- -----------------
--
--------------------------------------------
---
---在上面的代码中，我们导入 increment 和 INCREMENT_COUNTER，然后使用 Jest 的 expect() 函数来验证 increment 函数是否返回了一个对象，该对象与预期对象相等。如果测试通过，我们应该会收到 “1 passed” 的消息在 Jest 控制台上。
测试 Redux Reducer
接下来，我们测试 Redux Reducer。Redux Reducer 是一个纯函数，负责根据 Action 类型和 Action Payload 中的数据来更新 Redux Store 的状态。
以下代码展示了如何编写一个简单的 Redux Reducer：
------ - ----------------- - ---- ------------
------ ------- -------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-我们编写了一个 counter 函数，它接受两个参数：当前状态和要执行的 Action。根据 Action 的类型，我们汇总状态，然后返回一个新的状态对象。
以下是我们测试 Reducer 的代码：
------ ------- ---- ------------
------ - ---------- ----------------- - ---- ------------
-------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
------------------------- -------------- ------ - ---
---
---------- ------ ----------------- -------- -- -- -
-------
--------- ------ - -- -
----- -----------------
--
----------- ------ - ---
---
---------- ------ ------- ------ ------ -- -- -
------------------------- - ----- --------- ------------- ------ - ---
---
---在上面的代码中，我们导入了 counter 与 increment 函数，然后使用 expect() 函数来测试两个不同类型的 Action，以及未知的 Action 类型。如果测试通过，我们应该会收到 “3 passed” 的消息在 Jest 控制台上。
测试 Redux Thunk Action
最后，我们测试 Redux Thunk Action。Redux Thunk Action 是一个函数，可以在 Action Payload 中执行异步操作，并根据操作结果返回一个 Action 对象。
以下代码展示了如何编写一个简单的 Redux Thunk Action：
------ - --------- - ---- ------------
------ -------- ---------------- -
------ -------- -- -
------------- -- -
----------------------
-- ------
--
-在上面的代码中，我们编写了一个 incrementAsync 函数，该函数接受一个 dispatch 参数，将其用于调度操作。我们使用 setTimeout 函数模拟异步操作，并在操作完成后调用 increment 函数来更新状态。
以下是我们测试 Thunk Action 的代码：
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - -------------- - ---- -----------
------ - ------------------ --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
------------------ -- -- -
----------- ----------------- ------ ---------------- -- -- -
----- --------------- - --------------
----- ----- - ----------- ------ - ---
------ --------------------------------
-------- -- -
----------------------------------------------------
---
---
---在上面的代码中，我们使用 redux-mock-store 模拟了 Redux Store，并调用了 incrementAsync 函数。在函数执行完成后，我们验证了收到的 Action 是否符合预期的 Action。
总结
在这篇文章中，我们讨论了如何使用 Jest 测试 React + Redux + Thunk 应用程序。我们测试了 Redux Action、Redux Reducer 和 Redux Thunk Action。通过编写这些测试，我们可以确保应用程序的质量和稳定性，并保证我们的组件、行为和数据逻辑得到了完整的测试覆盖。
虽然本文只是介绍了 Jest 的基本用法，但 Jest 还有更多高级用法和工具，可以帮助我们编写更高效、可靠的测试用例。如果您愿意深入学习 Jest，应该可以帮助您在实际开发中更好地使用 React、Redux 和 Thunk。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664551d1d3423812e434404a