如何在 Jest 中测试 Redux?

前言

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。我们将测试以下场景:

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

编写测试用例

测试 reducer

我们从测试 reducer 开始。为了测试 reducer,我们需要两个东西:一个 action 和一个初始 state。我们可以使用 Jest 提供的 expecttoEqual 函数来测试 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


纠错反馈