使用 Jest 测试 Redux 的 action 及 reducer

在前端开发中，Redux 是一种很流行的状态管理库。由于 Redux 的核心概念相对简单，而且拥有丰富的生态系统和工具，因此它已经成为了许多前端开发者的首选。在使用 Redux 的过程中，我们经常需要测试它的 action 和 reducer，这也是保证我们代码质量的重要手段。本文将介绍如何使用 Jest 测试 Redux 的 action 及 reducer，并提供示例代码。

为什么要测试 Redux 的 action 和 reducer？

在开发过程中，我们需要保证代码的可靠性和正确性。Redux 的设计初衷就是为了避免共享状态的混乱和数据不一致，同时尽可能减少副作用。因此我们需要测试 Redux 的 action 和 reducer，这样可以确保我们的代码具有正确的行为和可预见的结果。另外，测试代码还可以帮助我们加深对 Redux 的理解，并且为代码维护提供前期保障。

Jest 简介

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它提供了很多强大的功能和工具，例如断言库、模拟对象、快照测试等等。对于 Redux 的测试，Jest 是一个非常好的选择。

Jest 的安装很简单，只需要运行以下命令即可：

npm install --save-dev jest

或者

yarn add --dev jest

创建测试用例

在进行测试前，我们需要创建一些测试用例。在 Redux 中，我们需要测试两部分内容：action 和 reducer。下面我们分别介绍如何测试这两部分内容。

测试 action

在 Redux 中，action 是一个简单的 JavaScript 对象，它用来描述发生了什么事情。通常情况下，我们会通过编写 action creator 函数来创建 action。action creator 函数接收参数并返回一个 action 对象。

为了测试一个 action creator 函数，我们可以编写以下测试用例：

import { createAction } from './actions';

describe('createAction', () => {
  it('should create an action with the given type', () => {
    const action = createAction('INCREMENT');

    expect(action).toEqual({
      type: 'INCREMENT',
    });
  });

  it('should add a payload property when passed an argument', () => {
    const action = createAction('ADD_TODO', 'Buy milk');

    expect(action).toEqual({
      type: 'ADD_TODO',
      payload: 'Buy milk',
    });
  });
});

在上面的测试用例中，我们使用 Jest 提供的 describe 和 it 函数来组织测试用例。在每个测试用例中，我们使用 expect 函数来判断 action creator 是否创建了正确的 action 对象。

测试 reducer

在 Redux 中，reducer 是一个纯函数，它接收旧的 state 和一个 action，然后返回新的 state。为了测试一个 reducer 函数，我们可以编写以下测试用例：

import todos from './reducer';
import { addTodo, toggleTodo } from './actions';

describe('todos reducer', () => {
  it('should handle ADD_TODO action', () => {
    const prevState = [];
    const action = addTodo('Buy milk');
    const newState = todos(prevState, action);

    expect(newState).toEqual([
      {
        id: 1,
        text: 'Buy milk',
        completed: false,
      },
    ]);
  });

  it('should handle TOGGLE_TODO action', () => {
    const prevState = [
      {
        id: 1,
        text: 'Buy milk',
        completed: false,
      },
    ];
    const action = toggleTodo(1);
    const newState = todos(prevState, action);

    expect(newState).toEqual([
      {
        id: 1,
        text: 'Buy milk',
        completed: true,
      },
    ]);
  });
});

在上面的测试用例中，我们定义了一个初始状态 prevState，然后分别测试了 ADD_TODO 和 TOGGLE_TODO 两个 action 的返回结果是否正确。

总结

本文介绍了如何使用 Jest 测试 Redux 的 action 和 reducer，同时给出了相应的示例代码。测试是写高质量、易于维护的代码的关键。尽管测试代码可能会增加一些初始工作量，但在长期维护代码的过程中，它们将帮助我们节省大量的时间和精力，并且有助于确保我们的代码质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3bcedadd4f0e0ffbe3185