使用 Jest 和 Immutable.js 测试 Redux 应用-JavaScript中文网-JavaScript教程资源分享门户

在开发前端应用的过程中，我们经常需要编写测试代码来保证程序的正确性。Redux 是一个流行的状态管理库，而 Jest 和 Immutable.js 则是基于 JavaScript 的开源测试框架和持久数据结构库。本文将介绍如何使用 Jest 和 Immutable.js 对 Redux 应用进行测试，并提供示例代码。

准备工作

在开始测试 Redux 应用之前，我们需要安装对应的库和工具链。我们需要安装以下库和工具：

Redux：状态管理库
Jest：测试框架
Immutable.js：持久数据结构库
babel-jest：使用 Babel 转换测试代码
redux-mock-store：生成 Redux Store 的模拟器

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

编写测试代码

测试 Redux Action

Redux Action 是一个简单的 JavaScript 对象，用于描述应用中发生的事件。我们可以使用 Jest 编写测试代码来测试 Redux Action 的正确性。

// javascriptcn.com 代码示例
import { addTodo } from './actions';

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

这段代码测试了 addTodo Action 的返回值是否正确。如果 addTodo 返回的 Action 对象与我们预期的 Action 对象相同，则测试通过。

测试 Redux Reducer

Redux Reducer 是一个纯函数，用于描述如何处理应用中发生的 Action。我们可以使用 Jest 和 Immutable.js 编写测试代码来测试 Redux Reducer 的正确性。

// javascriptcn.com 代码示例
import { List, Map } from 'immutable';
import todos from './reducer';

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

  it('should handle ADD_TODO', () => {
    expect(
      todos(List(), {
        type: 'ADD_TODO',
        text: 'Run the tests'
      })
    ).toEqual(List([Map({ id: 0, text: 'Run the tests', completed: false })]));

    expect(
      todos(
        List([Map({ id: 0, text: 'Run the tests', completed: false })]),
        {
          type: 'ADD_TODO',
          text: 'Use Redux'
        }
      )
    ).toEqual(
      List([
        Map({ id: 0, text: 'Run the tests', completed: false }),
        Map({ id: 1, text: 'Use Redux', completed: false })
      ])
    );
  });
});

这段代码测试了 todos Reducer 的初始状态和执行 ADD_TODO Action 后的状态是否正确。我们通过传递不同的 Action 类型和参数来测试 Reducer 的不同情况下的执行结果。

测试 Redux Store

Redux Store 是用于存储应用程序状态的容器。我们可以使用 Jest 和 redux-mock-store 创建一个模拟 Store，并测试 Store 的状态是否正确。

// javascriptcn.com 代码示例
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { addTodo, toggleTodo } from './actions';
import todos from './reducer';

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

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

    return store.dispatch(addTodoThunk('Bring milk')).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

这段代码测试了 addTodo Action 的异步执行情况。我们使用 redux-mock-store 创建了一个模拟 Store，并执行 addTodoThunk 回调函数。最后，我们检查 Store 是否收到了正确的 Action。

总结

在本文中，我们介绍了如何使用 Jest 和 Immutable.js 测试 Redux 应用。我们详细地讲解了如何编写测试代码，以及测试代码背后的思想和原理。通过本文的学习，您将了解如何编写高质量的前端测试代码，帮助您在开发过程中不断保证代码的正确性。

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