如何使用Jest + Enzyme测试React+TypeScript项目中的axios异步API调用

没问题，我来帮你搞定用Jest+Enzyme测试这个异步Redux action的事儿，咱们一步步来：

你的loadItems是个thunk类型的action，得用redux-mock-store模拟Redux store，同时mock掉axios避免发送真实API请求，这样测试才靠谱。

1. 先装必要依赖 #

确保项目里有这些开发依赖：

npm install --save-dev redux-mock-store jest-enzyme axios-mock-adapter

2. 编写异步Action的测试用例 #

我们用axios-mock-adapter拦截axios请求，分别测试请求成功和请求失败两种场景：

测试请求成功场景 #

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { loadItems, loadItemsSuccess, LOAD_ITEMS } from './your-action-file-path';

// 配置mock store的中间件
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const mockAxios = new MockAdapter(axios);

describe('loadItems action', () => {
  // 每个测试后重置mock，避免测试间互相干扰
  afterEach(() => {
    mockAxios.reset();
  });

  it('请求成功时应该dispatch loadItemsSuccess', async () => {
    // 模拟API返回的假数据
    const mockItems = [{ id: 1, name: '测试项1' }, { id: 2, name: '测试项2' }];
    // 拦截GET请求并返回模拟数据
    mockAxios.onGet('http://192.168.99.100:3000/items').reply(200, mockItems);

    // 预期会被dispatch的action序列
    const expectedActions = [
      { type: LOAD_ITEMS, items: mockItems }
    ];

    // 创建初始为空的mock store
    const store = mockStore({});

    // 执行异步action
    await store.dispatch(loadItems() as any);

    // 验证实际dispatch的action和预期是否一致
    expect(store.getActions()).toEqual(expectedActions);
  });
});

测试请求失败场景 #

it('请求失败时应该打印错误日志', async () => {
  // 模拟API返回500错误
  mockAxios.onGet('http://192.168.99.100:3000/items').reply(500);

  // 监听console.log，验证错误信息是否被正确打印
  const consoleSpy = jest.spyOn(console, 'log').mockImplementation();

  const store = mockStore({});
  await store.dispatch(loadItems() as any);

  // 验证日志输出
  expect(consoleSpy).toHaveBeenCalledWith('Error loading items', expect.any(Error));

  // 恢复console.log的原始实现
  consoleSpy.mockRestore();
});

Reducer的测试就简单多了，直接传入action和初始状态，验证返回的新状态是否正确：

import itemsReducer from './your-reducer-file-path';
import { LOAD_ITEMS } from './your-action-file-path';

describe('items reducer', () => {
  it('收到LOAD_ITEMS时应该更新store的items', () => {
    const mockItems = [{ id: 1, name: '测试项' }];
    const action = { type: LOAD_ITEMS, items: mockItems };

    // 假设初始状态是空数组，传入action后验证新状态
    const newState = itemsReducer([], action);
    expect(newState).toEqual(mockItems);
  });
});

你的action代码里有个语法错误：console.log("Error loading items, error); 应该改成console.log("Error loading items", error);，不然测试失败场景会报错哦。

内容的提问来源于stack exchange，提问作者vanegeek