React中使用Jest测试redux异步action getUserData运行失败如何解决

测试失败核心原因 #

• getUserData 是异步thunk高阶函数，调用后首先返回的是接收dispatch、getState参数的函数，最终执行结果是Promise对象，原用例同步执行断言拿到的是Pending状态的Promise，无法匹配预期值
• 原用例调用getUserData时没有传入thunk必须的dispatch、getState参数，内部的dispatch逻辑无法正常执行
• 异步测试用例没有添加等待逻辑，jest会在异步逻辑执行完成前就结束用例，无法拿到正确执行结果

修正后测试用例 #

import { getUserData, GET_USER } from "../userReducers";

// 全局mock fetch接口
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => ({ login: 'Someone' })
  })
)

describe("Testing user reducers", () => {
  // 每个用例执行前清空mock调用记录，避免用例间互相污染
  beforeEach(() => {
    fetch.mockClear();
  })

  it("will hit mock API and get response", async () => {
    // mock thunk需要的dispatch和getState参数
    const mockDispatch = jest.fn();
    const mockGetState = jest.fn();

    // 调用thunk函数，加上await等待异步逻辑全部执行完成
    const response = await getUserData('Someone')(mockDispatch, mockGetState);

    // 断言fetch调用路径符合预期
    expect(fetch).toHaveBeenCalledWith(`${process.env.REACT_APP_API_URL}/users/Someone`);
    // 断言接口返回值符合预期
    expect(response).toEqual({ login: 'Someone' });
    // 断言dispatch触发了正确的action
    expect(mockDispatch).toHaveBeenCalledWith({
      type: GET_USER,
      payload: { login: 'Someone' }
    })
  })
})

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