Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它可以处理随着时间推移变化的状态，而不会让你陷入混乱的条件嵌套或循环。该文将教你如何使用 Jest 来测试 Redux。
为什么需要测试 Redux
在 Redux 中，我们会有一个 Store 来存储我们应用程序的状态。在这种情况下，我们将这个状态称为 state。我们将对 state 进行管理，以便我们可以随时查看我们应用程序的状态，并使操作更加可预测。
为了确保我们的代码能够正常工作，我们需要进行测试。这有助于我们在代码中引入新错误时，尽早发现它们，从而减少故障和测试时间。
什么是 Jest？
Jest 是 Facebook 开源的一个 JavaScript 测试框架，它专注于提供一个优雅的、零配置的测试环境。Jest 也已经成为 React 社区最受欢迎的测试框架。
Jest 除了可以做一些基本的测试断言外，还提供了丰富的 API，使得测试变得更加简单和高效。它还与 Babel、TypeScript 等工具的集成非常友好。
安装 Jest
首先，你需要在项目中添加 Jest 依赖。
npm install --save-dev jest
这将安装 Jest 到我们的项目的开发依赖中。
配置 Jest
创建一个文件 jest.config.js，Jest 默认会在当前工作目录下搜索此文件。以下是一个最基本的配置示例：
module.exports = {
testEnvironment: 'node',
roots: ['<rootDir>/src'],
};以上配置指定 Jest 使用 Node.js 环境来运行我们的测试，并告诉它只搜索 src 目录下的测试文件。
如何测试 Redux
在 Redux 应用程序中，我们需要测试三个关键部分：reducers、actions 和 selectors。
- 测试 reducers
Reducers 是我们状态的管理者。当我们拥有一个草图或原型时，我们可以根据它们去编写测试用例并验证 reducers 是否按照我们的期望工作。
以下是一个简单的 reducer 的示例：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------
----- ------------ - -
-------- --
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------------
------ -
---------
-------- ------------- - --
--
--------
------ ------
-
-
------ ------- ---------------我们可以编写一个测试用例来测试这个 reducer：
-- -------------------- ---- -------
------ -------------- ---- -------------
------ - ----------------- - ---- --------------
----------------- --------- -- -- -
---------- ------ ------------------- -- -- -
----------------------- -------- - -- - ----- ----------------- ------------- -------- - ---
---
---------- ------ ------- ------ ------ -- -- -
----------------------------------- - ----- --------- --------------------------
---
---上面的测试用例验证了当传入 INCREMENT_COUNTER 状态时，我们的 reducer 应该增加计数器。
- 测试 actions
Actions 会触发我们的状态更新。它们由纯 JS 对象组成，其中至少要包含一个 type 属性来告诉 reducer 要执行什么操作。
以下是一个简单的 action 示例：
import { INCREMENT_COUNTER } from './constants';
export function incrementCounter() {
return {
type: INCREMENT_COUNTER,
};
}同样，我们也可以编写一个测试用例来测试这个 action：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------
------ - ----------------- - ---- --------------
----------------- --------- -- -- -
---------- ------ -- ------ -- --------- --------- -- -- -
----- -------------- - -
----- ------------------
--
---------------------------------------------------
---
---这个测试用例验证了当我们调用 incrementCounter 时，它将返回一个包含 INCREMENT_COUNTER 类型的 action。
- 测试 selectors
Selectors 帮助我们从 state 中以一种组织良好的方式提取数据。我们可以编写测试用例，以确保选择器按照预期工作。
以下是一个简单的 selector 示例：
export const getCounterValue = (state) => state.counter;
同样，我们也可以编写一个测试用例来测试这个选择器：
import { getCounterValue } from './selectors';
describe('Counter selectors', () => {
it('should return the value of counter', () => {
const state = { counter: 5 };
expect(getCounterValue(state)).toEqual(5);
});
});这个测试用例验证了当我们调用 getCounterValue 时，它可以正确从 state 中返回 counter 的值。
总结
我们已经学习了如何使用 Jest 测试 Redux 应用程序。我们看到，可以使用 Jest 来编写测试用例，以验证 reducers、actions 和 selectors 是否按照期望的方式工作。
当我们编写测试用例时，我们可以更加自信地修改和重构代码，因为我们有了一组准确的测试供我们验证代码的正确性。
希望这篇文章能给你带来帮助，让你更加自信地编写和维护 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66580eb7d3423812e4dcf74d