Umi 框架下使用 Jest 编写单元测试用例，模拟异步 dispatch

在 Umi 框架下使用 Jest 编写单元测试用例并模拟异步 dispatch 的步骤如下：

安装依赖

在项目根目录下运行以下命令安装所需依赖：

npm install --save-dev jest jest-enzyme enzyme enzyme-adapter-react-16 redux-mock-store

其中，Jest 是测试框架，jest-enzyme 是 Jest 的 Enzyme 适配器，Enzyme 是一个 React 测试工具，enzyme-adapter-react-16 是 Enzyme 的 React 16 适配器，redux-mock-store 用于模拟 Redux store 的工具。

配置 Jest

在项目根目录下创建 jest.config.js 文件，配置 Jest：

module.exports = {
  testEnvironment: 'enzyme',
  setupFilesAfterEnv: ['<rootDir>/src/setupEnzyme.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

其中，testEnvironment 指定测试环境为 Enzyme，setupFilesAfterEnv 指定在运行测试之前需要运行的文件，moduleNameMapper 用于将 @ 别名映射为 src 目录。

在项目根目录下创建 src/setupEnzyme.js 文件，配置 Enzyme：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

编写测试用例

假设有一个异步 action：

export function fetchUser() {
  return async dispatch => {
    dispatch({ type: 'FETCH_USER_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const user = await response.json();
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
    }
  };
}

我们可以编写以下测试用例：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
import { fetchUser } from '@/actions/user';

const mockStore = configureMockStore([thunk]);

describe('user actions', () => {
  afterEach(() => {
    fetchMock.restore();
  });

  it('creates FETCH_USER_SUCCESS when fetching user has been done', () => {
    const user = { id: 1, name: 'Leanne Graham' };
    fetchMock.getOnce('https://jsonplaceholder.typicode.com/users/1', {
      body: user,
      headers: { 'content-type': 'application/json' }
    });

    const expectedActions = [
      { type: 'FETCH_USER_REQUEST' },
      { type: 'FETCH_USER_SUCCESS', payload: user }
    ];

    const store = mockStore({});

    return store.dispatch(fetchUser()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

这个测试用例模拟了一个成功的异步请求，并验证了 dispatch 的行为是否正确。

运行测试

在项目根目录下运行以下命令运行测试：

npm test

如果所有测试用例都通过，将会输出类似以下内容的信息：

PASS  src/actions/user.test.js
  user actions
    ✓ creates FETCH_USER_SUCCESS when fetching user has been done (11ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.485s
Ran all test suites.