Redux-saga 是 Redux 应用程序中数据交互处理的一种方式。它允许您在 Redux 应用程序中编写非阻塞代码，例如发送 AJAX 请求并在响应到达时触发另一个 Redux Action。测试 Redux-saga 是一个挑战，因为它涉及到异步行为。在本文中，我们将学习如何在 Jest 中测试 Redux-saga。
安装 Jest
Jest 是 Facebook 推出的 JavaScript 测试框架，它可以执行单元测试、全局测试等多种测试类型。Jest 在测试 Redux-saga 时非常实用，因为它支持异步测试和模拟。
首先，在命令行中运行以下命令安装 Jest：
npm install --save-dev jest
安装完成后，在项目的 package.json 文件中添加以下代码块：
{
"scripts": {
"test": "jest"
}
}编写测试代码
现在让我们编写一个简单的 Redux-saga，然后编写它的测试。
假设我们有一个异步操作，该操作通过向服务器发送 ID 请求异步数据。我们将编写一个 Redux-saga，该 Redux-saga 监听名为 REQUEST_DATA 的 Redux Action，它将为 ID 创建一个 API 端点，发出 HTTP 请求并将结果作为名为 RECEIVE_DATA 的 Action 发送回 Redux 应用程序。
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ ----- ---- --------
--------- ----------------- -
----- ------- - ------------------------------------------
--- -
----- -------- - ----- --------------- ---------
----- ----- ----- --------------- -------- ------------- ---
- ----- --- -
---------------
-
-
--------- ---------- -
----- ------------------------- -----------
-
------ ------- ---------这个 Redux-saga 很简单：通过创建一个名为 fetchData 的生成器函数，它使用 call 函数调用 axios.get，该函数返回异步数据请求的结果。如果请求成功，则通过使用 put 函数触发 RECEIVE_DATA Action 并将返回数据作为该 Action 的 payload 发送。如果请求失败，则使用 console.log 输出错误信息。
现在，我们编写一个使用 Jest 框架编写的测试来测试这个 Redux-saga 的功能。
-- -------------------- ---- -------
------ - --------- - ---- ----------
------ - ----- --- - ---- ---------------------
------ ----- ---- --------
--------------- ------ -- -- -
----- ------ - - ----- --------------- -------- - --- --- - --
----- --------- - ------------------
---------- ---- --- --- -------- ------- -------- -- -- -
------------------------------
------------------------ ---------------------------
----- -------- - - ----- ------ --
--------------------------------------
-------------- ----- --------------- -------- ------ ----
---
---------- ------- --- ---- ----- -- -- ------- -- -- -
----- ----- - --- ---------------
------------------------------------
-----------------------------
---
---这个 Jest 测试代码涉及三个测试步骤。第一步是测试调用 axios.get 函数。它使用 expect 函数和 toEqual 匹配器与 call 函数进行比较。如果其前面的步骤未引发异常，则向 expect 函数传递的变量应该与第二个测试代码块的 response 变量相等。response 变量预期将被封送为 { data：'data' }。
第二步是测试 put 函数的调用。它使用 expect 函数和 toEqual 匹配器与 put 函数进行比较。如果没有异常，则预期触发 RECEIVE_DATA Action，并将 response.data 作为其 payload。
第三步是测试 console.log 函数的调用。它使用 throw 函数和一个错误对象来测试 If 在 fetchData 函数中抛出异常时，将调用 console.log，并将 error 对象作为其参数。
这是一种测试 Redux-saga 的方法，是在 Jest 中编写测试。基本上，我在测试代码块中创建了一个名为 action 的模拟 Redux Action，并运行它，然后模拟了 axios.get 函数的响应。最后，我通过测试 put 和 console.log 函数来测试发出的 Action 和错误信息。
总结
在 Jest 中测试 Redux-saga 可以帮助您验证非阻塞代码的功能，例如异步数据请求、WebSocket 连接或计时器。在撰写测试代码之前，请确保您熟悉 Redux 的基本概念以及 Redux-saga 的使用方法。请按照上面提供的代码和步骤，在 Jest 中编写 Redux-saga 测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b4138968c7c53b0d9ae49
