umi框架下使用jest编写单元测试用例 模拟异步dispatch

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

1. 安装依赖

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

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的工具。

2. 配置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() });

3. 编写测试用例

假设有一个异步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的行为是否正确。

4. 运行测试

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

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.
``