使用Jest和Enzyme测试React/Redux应用程序-第4部分：测试ReduxReducers

这是使用 Jest 和 Enzyme 测试 React / Redux 应用程序的 4 部分系列的第 4 部分，以获得强大的测试解决方案。在这一部分中，我们将介绍一些关于如何测试 Redux reducer 的简单示例。

该系列

第1部分：安装和设置
第 2 部分：测试 React 组件
第 3 部分：测试 Redux 操作
第 4 部分：测试 Redux Reducers （这篇文章）

继续测试 Redux，我们将通过向您展示如何测试您的 reducer 来完成本系列。 Reducers 是 React / Redux 应用程序中完整渲染链的组成部分。当采取行动时，它们会更新我们的状态，这会导致 React 重新渲染 UI。

我们开始做吧！

设置测试套件

首先要做的是 import 我们要测试的减速器和我们的动作类型。我们还将继续编写 describe() 块来封装我们用于此 reducer 的测试套件。

动作类型文件导出映射到每个动作的字符串值的常量。

__tests__/reducers/select_reducer.test.js

// Reducer to be tested
import selectReducer from '../../reducers/select_reducer';
import {
  SELECT_AVATAR, // Only ones related to the reducer being tested
} from '../../actions/types';

describe('select_reducer', () => {
  // ...
});

花点时间看看上面的代码。您可能会注意到我们用于测试操作的设置代码中有一些遗漏。我们没有嘲笑我们的商店。这意味着我们不需要 import 的 redux-mock-store 包。我们也不需要在每次测试之前运行 clearActions()。这是因为我们将在直接调用 reducer 后测试从 reducer 返回的结果。我们不会 dispatch() 将它们像我们对动作所做的那样进入我们的商店。

测试你的减速器

让我们首先测试我们的初始状态。我们通过将一个虚拟动作传递给我们的减速器来做到这一点。我在减速器中有一个 switch 语句，默认为 case。如果 reducer 无法识别 action 类型，则返回当前未修改的状态。否则，它返回修改后的状态。所以通过传入一个虚拟动作，我们可以测试我们的 initialState（因为我们首先运行这个测试）。

__tests__/reducers/select_reducer.test.js

// ...

describe('INITIAL_STATE', () => {
  test('is correct', () => {
    const action = { type: 'dummy_action' };
    const initialState = { selectedAvatar: 0 };

    expect(selectReducer(undefined, action)).toEqual(initialState);
  });
});

// ...

接下来让我们测试我们的 reducer 在传递一个可识别的动作和有效负载时是否按预期修改了我们的状态。

__tests__/reducers/select_reducer.test.js

// ...

describe('SELECT_AVATAR', () => {
  test('returns the correct state', () => {
    const action = { type: SELECT_AVATAR, payload: 1 };
    const expectedState = { selectedAvatar: 1 };

    expect(selectReducer(undefined, action)).toEqual(expectedState);
  });
});

// ...

快照

就像操作和组件一样，一旦您的测试通过，您就可以利用 Snapshots 并删除几行代码：

__tests__/reducers/select_reducer.test.js

// ...

describe('INITIAL_STATE', () => {
  test('is correct', () => {
    const action = { type: 'dummy_action' };

    expect(selectReducer(undefined, action)).toMatchSnapshot();
  });
});

describe('SELECT_AVATAR', () => {
  test('returns the correct state', () => {
    const action = { type: SELECT_AVATAR, payload: 1 };

    expect(selectReducer(undefined, action)).toMatchSnapshot();
  });
});

// ...

奖金提示！

尽可能将减速器分组到类似的功能中。在我们的 selectReducers 文件中，我们使用了 SELECT_AVATAR 动作类型，但很容易在同一个动作类型中添加其他类型，例如 SELECT_USER、SELECT_THEME 等等减速器。通过将它们组合在一起，我们改进了我们的应用程序架构。如果它们的功能相似，我们可以应用 DRY 原则。我们有更多的机会重用代码和编写可以覆盖所有内容的测试助手，如 reducer。

结论

在本系列的第 1 部分中，我向您展示了如何安装和设置 Jest 和 Enzyme。在第 2 部分中，我介绍了测试 React 组件。在第 3 部分中，我介绍了测试 Redux 操作。我们在这篇文章中完成了对减速器的测试。

你现在应该有一个全面的设置和相关知识来测试你的 React / Redux 应用程序。测试不一定很困难。感谢您的关注！