在 Jest 中测试 Redux Action 和 Reducer-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个非常受欢迎的状态管理库，它能够使我们方便地管理应用程序的状态。但是，对于大型应用程序，Redux 的测试是很重要的。在本篇文章中，我们将学习如何使用 Jest 测试 Redux Action 和 Reducer。

Redux 概述

先简单介绍一下 Redux，它是一种数据管理框架，主要用于应用程序的状态管理。Redux 有三个核心部件：State、Action 和 Reducer，其中 State 表示应用程序的状态，Action 表示用户行为，Reducer 表示如何更新状态。

Jest 测试概述

Jest 是 Facebook 推出的一个测试框架，它提供了简单的语法和交互式方式来编写和运行测试用例。Jest 能够运行在 Node.js 环境中，并且执行测试非常快。

环境搭建

为了运行测试用例，我们需要安装 Jest。为了测试 Redux，我们还需要安装 redux 和 redux-mock-store 两个库。redux-mock-store 提供了一个可以模拟 Redux store 的函数。

npm install --save-dev jest redux redux-mock-store

这样就安装好了 Jest 并准备好了测试 Redux 的依赖。

测试 Action

我们先来看一个简单的 Action，它的目的是将一个新的任务添加到任务列表中。

export const ADD_TASK = "ADD_TASK";

export const addTask = (title) => ({
  type: ADD_TASK,
  title,
});

在这个例子中，addTask 函数返回一个对象，它包含一个 type 和一个名为 title 的参数。我们可以预期这个 Action 会被我们的应用程序代码正确处理。

为了测试 addTask 函数，我们需要编写一个测试用例。首先，我们需要引入必要的函数和我们的 Action。

import configureStore from "redux-mock-store";
import { addTask, ADD_TASK } from "./actions";

然后，我们需要创建一个模拟的 Redux store。我们可以使用 redux-mock-store 库提供的 configureStore 函数来创建模拟 store。

const mockStore = configureStore([]);
const store = mockStore({});

接下来，我们可以调用 addTask 函数并传入一个标题，然后将返回值传递给我们的模拟 store 的 dispatch 函数。

store.dispatch(addTask("New Task"));

最后，我们可以使用 Jest 的 expect 函数来断言我们期望的值是否与实际值相等。

expect(store.getActions()).toEqual([{ type: ADD_TASK, title: "New Task" }]);

这个测试用例将检查模拟 store 对象中是否包含我们的 Action。如果测试通过，我们可以认为我们的 Action 被正确地发送到了 Redux store 中。

测试 Reducer

现在，我们已经测试了 Action，接下来我们将测试 Reducer。我们将创建一个 Reducer，它的作用是将我们的任务列表中添加一条新的任务。

// javascriptcn.com 代码示例
import { ADD_TASK } from "./actions";

const initialState = [];

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TASK:
      return [
        ...state,
        {
          title: action.title,
          completed: false,
        },
      ];
    default:
      return state;
  }
};

这个 Reducer 接收一个名为 state 的状态对象和一个名为 action 的对象作为输入，并返回一个新的状态。在这个例子中，我们期望它会在任务列表中添加新的任务，然后返回更新后的任务列表。

我们可以使用同样的方法创建测试用例来测试 Reducer。首先，我们需要在测试文件中引入必要的函数和 Reducer。

import { ADD_TASK } from "./actions";
import { reducer } from "./reducer";

接下来，我们需要定义一个初始状态，然后创建一个模拟 Action。

const initialState = [];

const action = {
  type: ADD_TASK,
  title: "New Task",
};

最后，我们可以调用 Reducer 并传入初始状态和模拟的 Action，然后断言 Reducer 会返回更新后的任务列表。

expect(reducer(initialState, action)).toEqual([
  {
    title: "New Task",
    completed: false,
  },
]);

这个测试用例将检查 Reducer 是否能正确地处理模拟的 Action，并返回预期的结果。如果测试通过，我们可以认为 Reducer 能够正常工作。

测试总结

在 Jest 中测试 Redux Action 和 Reducer 非常简单，只需要按照步骤编写测试用例即可。在编写测试用例时，我们需要保证测试覆盖了我们的应用程序逻辑，并检查期望的结果是否与实际结果相符。这些测试用例可以确保我们的 Redux 状态管理工作正常，并且在修改代码时不会产生无意中的副作用。

完整示例代码：

actions.js

export const ADD_TASK = "ADD_TASK";

export const addTask = (title) => ({
  type: ADD_TASK,
  title,
});

reducer.js

// javascriptcn.com 代码示例
import { ADD_TASK } from "./actions";

const initialState = [];

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TASK:
      return [
        ...state,
        {
          title: action.title,
          completed: false,
        },
      ];
    default:
      return state;
  }
};

actions.test.js

// javascriptcn.com 代码示例
import configureStore from "redux-mock-store";
import { addTask, ADD_TASK } from "./actions";

const mockStore = configureStore([]);
const store = mockStore({});

beforeEach(() => {
  store.clearActions();
});

it("should dispatch action", () => {
  const title = "New Task";
  store.dispatch(addTask(title));
  expect(store.getActions()).toEqual([{ type: ADD_TASK, title }]);
});

reducer.test.js

// javascriptcn.com 代码示例
import { ADD_TASK } from "./actions";
import { reducer } from "./reducer";

const initialState = [];

const action = {
  type: ADD_TASK,
  title: "New Task",
};

it("should return updated state", () => {
  expect(reducer(initialState, action)).toEqual([
    {
      title: "New Task",
      completed: false,
    },
  ]);
});

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