前言
在前端应用中，Redux 作为应用状态管理工具，已经成为了开发者的选择之一。而在使用 Redux 过程中，我们会遇到许多测试问题。如何使用 Jest 测试 Redux 的同步 action 是我们在 Redux 开发和测试中经常需要掌握的一个技能。
在本文中，我们将学习如何使用 Jest 测试 Redux 的同步 action，并提供一些示例代码。
Redux 同步 action 简介
在 Redux 中，action 是一个包含 type 属性的简单 JavaScript 对象。同步 action 是指将数据从应用程序发送到 Redux。如果一个 action 包含数据，则它会被作为负载添加到 action 中。
同步 action 示例：
// src/actions.js
export const ADD_TODO = 'ADD_TODO';
export function addTodo(text) {
return { type: ADD_TODO, text };
}这样就是一个简单的 Redux 同步 action。
Jest 和 Redux 数据流测试
Jest 是 Facebook 出品的一个快速，安全的 JavaScript 测试框架。它被广泛应用于现代 JavaScript 技术栈的测试中，包括 React 和 Redux。
Redux 可以说是 Jest 中一个常常测试的组件。Redux 的数据流在测试中是很常见的一个场景。在测试中，我们可以检查 action、reducer 和在 React 组件中的渲染。
在本文中，我们将通过一个简单的例子了解如何使用 Jest 测试 Redux 同步 action。
Jest 测试 Redux 同步 action
在这个例子中，我们将测试一个简单的同步 action。我们的 action 将包含一个纯文本对象，携带一个字符串消息。
// src/actions.js
export const DispatchMessage = 'DISPATCH_MESSAGE';
export function dispatchMessage(message) {
return { type: DispatchMessage, message };
}我们将使用 Jest 编写一个测试来确保我们的 action 函数发出正确的 action 类型并返回正确的信息。我们将首先创建一个测试套件，然后创建一个测试，它会调用我们的 dispatchMessage 函数并判断它是否返回了正确的对象：
-- -------------------- ---- -------
-- -------------------
------ ----------------- ---------------- ---- ------------
------------------- -- -- -
---------- ------ -- ------ -- -------- --------- -- -- -
----- ------- - ----- ---------
----- -------------- - -
----- ----------------
-------
--
--------------------------------------------------------
---
---在这个测试中，我们首先导入了 dispatchMessage 函数和 DispatchMessage 常量。这些是我们测试中要用的工具。然后我们使用 Jest 中的 describe 函数来组织测试套件，并使用 it 函数来编写单元测试。我们的单元测试将定义一个消息文本字符串和一个期望的 action 对象。我们调用 dispatchMessage 函数，检查它是否返回正确的 action 对象。
然后，我们执行以下操作：
$ yarn test // or $ npm run test
在控制台中，我们会看到以下输出：
PASS src/actions.test.js
actions
✓ should create an action to dispatch message (4ms)
...
----------------------------------------------------------------------
Ran all test suites in 1.016s这说明我们的测试已经通过了。现在我们已经知道如何使用 Jest 测试 Redux 的同步 action。
总结
在本文中，我们学习了如何使用 Jest 测试 Redux 同步 action。首先，我们了解了 Redux 数据流中同步 action 的概念和示例代码。然后，我们深入研究了如何在 Jest 中测试同步 action 并提供了测试案例示例。
我们相信这样的测试教程可以帮助你开始为你的 Redux 应用开发测试套件。如果你需要进一步了解，可以查看 Jest 官方文档，学习更多关于 Jest 测试的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acb7e448841e98948a7947