如何在 Jest 中测试 Redux？-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 是一个非常流行的 JavaScript 状态管理库，但如何测试 Redux 却是一个特别的挑战。在本文中，我们将详细介绍如何在 Jest 中测试 Redux 应用程序，包括如何编写测试用例和使用 Jest 提供的各种功能进行测试。

基础概念

在开始测试 Redux 之前，我们需要了解一些基本的概念。

Store

Store 是 Redux 中的一个核心概念，它是一个保存状态的容器，它管理着应用程序的状态。通常来说，一个应用程序只能有一个 Store。

Action

Action 是一个简单的 JavaScript 对象，用于描述发生了什么。一个 Action 应该包含一个 type 字段，用于描述 Action 的类型。

Reducer

Reducer 是一个纯函数，它接收先前的 state 和一个 action，并返回一个新的 state。

测试场景

在本文中，我们将使用一个简单的 Todo 应用程序来说明如何在 Jest 中测试 Redux。我们将测试以下场景：

测试 reducer 是否正常工作。
测试 action 是否正确地被分发。
测试组件是否正确地连接到 store 中。

编写测试用例

测试 reducer

我们从测试 reducer 开始。为了测试 reducer，我们需要两个东西：一个 action 和一个初始 state。我们可以使用 Jest 提供的 expect 和 toEqual 函数来测试 reducer 是否正确工作。

import { ADD_TODO } from './actions';
import todos from './reducers';

describe('todos reducer', () => {
  it('should return the initial state', () => {
    expect(todos(undefined, {})).toEqual([]);
  });

  it('should handle ADD_TODO', () => {
    expect(
      todos([], {
        type: ADD_TODO,
        text: 'Test Add Todo',
      })
    ).toEqual([
      {
        text: 'Test Add Todo',
        completed: false,
      },
    ]);

    expect(
      todos(
        [
          {
            text: 'Test Todo',
            completed: false,
          },
        ],
        {
          type: ADD_TODO,
          text: 'Test Add Todo',
        }
      )
    ).toEqual([
      {
        text: 'Test Todo',
        completed: false,
      },
      {
        text: 'Test Add Todo',
        completed: false,
      },
    ]);
  });
});

测试 action

接下来，我们将测试 action 是否正确地被分发。我们可以使用 Jest 提供的 spy 函数来监视一些函数是否被调用。

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { addTodo, ADD_TODO } from './actions';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('actions', () => {
  it('should create an action to add a todo', () => {
    const text = 'Test Add Todo';
    const expectedAction = {
      type: ADD_TODO,
      text,
    };
    expect(addTodo(text)).toEqual(expectedAction);
  });
});

describe('async actions', () => {
  it('creates ADD_TODO when adding todo has been done', () => {
    const expectedActions = [
      { type: ADD_TODO, text: 'Test Add Todo' },
    ];
    const store = mockStore({ todos: [] });

    return store.dispatch(addTodo('Test Add Todo')).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

测试组件连接到 store 中

最后，我们将测试组件是否正确地连接到 store 中。我们可以使用 Jest 提供的 render 函数来测试组件是否正常渲染。

import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import TodoList from './TodoList';

const middlewares = [];
const mockStore = configureMockStore(middlewares);

function setup() {
  const initialState = { todos: [] };
  const store = mockStore(initialState);
  const props = {
    todos: [],
    actions: {
      addTodo: jest.fn(),
    },
  };
  const enzymeWrapper = shallow(<TodoList {...props} />, {
    context: { store },
  });

  return {
    props,
    enzymeWrapper,
    store,
  };
}

describe('TodoList Component', () => {
  it('should render self and subcomponents', () => {
    const { enzymeWrapper } = setup();

    expect(enzymeWrapper.find('.todoList').exists()).toBe(true);
  });
});

总结

在本文中，我们介绍了如何在 Jest 中测试 Redux 应用程序。我们学习了如何编写测试用例，并使用各种 Jest 功能进行测试。在编写测试用例时，请务必牢记三个重要的 Redux 概念：Store、Action 和 Reducer。通过遵循这些步骤，您可以轻松地测试您的 Redux 应用程序，以确保它们的正确性和稳定性。

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

如何在 Jest 中测试 Redux？

前言