React-Redux异步Action测试异常：Jest用例始终通过

你的测试用例之所以总是通过，核心原因是Jest没有等待store.dispatch(attachFile(file))返回的Promise执行完成。Jest默认会同步执行测试逻辑，如果测试中包含异步操作（比如Promise），但你没有明确告诉Jest要等待这个异步流程结束，Jest会直接认为测试已经完成，不会等待Promise内部的断言（或fail语句）执行。

解决方案：让Jest追踪异步操作 #

你可以通过以下三种方式让Jest等待异步操作完成，确保断言能被正确执行：

1. 使用async/await（最简洁推荐） #

把测试函数声明为async，然后await异步dispatch的结果：

test('dispatches ATTACH_FILE_DONE on successful file read', async () => {
  // 准备模拟的file对象和预期actions
  const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
  const expectedActions = [{
    type: actionTypes.ATTACH_FILE_DONE,
    file: { /* 匹配预期的file数据 */ }
  }];

  await store.dispatch(attachFile(file));

  console.log('ACTUAL ACTIONS:', store.getActions());
  console.log('EXPECTED ACTIONS:', expectedActions);
  expect(store.getActions()).toEqual(expectedActions);
});

2. 返回Promise链 #

让测试函数直接返回dispatch后的Promise链，Jest会自动等待这个Promise完成：

test('dispatches ATTACH_FILE_DONE on successful file read', () => {
  const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
  const expectedActions = [{
    type: actionTypes.ATTACH_FILE_DONE,
    file: { /* 匹配预期的file数据 */ }
  }];

  return store.dispatch(attachFile(file))
    .then(() => {
      console.log('ACTUAL ACTIONS:', store.getActions());
      console.log('EXPECTED ACTIONS:', expectedActions);
      expect(store.getActions()).toEqual(expectedActions);
    });
});

3. 使用done回调 #

Jest支持传入done参数来标记测试完成，你需要在Promise的then或catch中调用它（注意处理错误情况，避免测试挂起）：

test('dispatches ATTACH_FILE_DONE on successful file read', (done) => {
  const file = new File(['test content'], 'test.txt', { type: 'text/plain' });
  const expectedActions = [{
    type: actionTypes.ATTACH_FILE_DONE,
    file: { /* 匹配预期的file数据 */ }
  }];

  store.dispatch(attachFile(file))
    .then(() => {
      console.log('ACTUAL ACTIONS:', store.getActions());
      console.log('EXPECTED ACTIONS:', expectedActions);
      expect(store.getActions()).toEqual(expectedActions);
      done(); // 告诉Jest测试已完成
    })
    .catch(error => {
      done(error); // 如果Promise拒绝，传递错误标记测试失败
    });
});

额外注意事项 #

• 测试错误场景时，记得用expect.assertions(n)来确保指定数量的断言被执行，避免因为Promise被拒绝但没有捕获而导致测试误判：

  test('dispatches ATTACH_FILE_FAIL on file read error', async () => {
    expect.assertions(1);
    // 模拟一个会触发错误的file对象
    const faultyFile = /* 构造会导致FileReader错误的对象 */;
    
    try {
      await store.dispatch(attachFile(faultyFile));
    } catch (error) {
      expect(store.getActions()[0].type).toBe(actionTypes.ATTACH_FILE_FAIL);
    }
  });
  

• 确保你的store是测试专用的实例（比如用redux-mock-store创建），避免测试间的状态污染。

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