React组件测试时Mock数据已接收但组件仍显示加载态问题求助

核心原因 #

• 异步执行时序问题：你mock的UTILS.getFruits返回的是Promise实例，属于微任务。测试用例中mount执行完后会立刻执行同步任务console.log(wrapper.debug())，此时Promise还未进入resolve回调，loading状态仍为true，组件还没有触发重渲染。而组件内部的console.log是在Promise resolve后的微任务队列中执行的，执行时机晚于你打印wrapper的时机，你可以观察控制台输出顺序，正常会先打印wrapper.debug的内容，再打印组件内部的水果数据，完全符合这个时序逻辑。
• 没有等待React状态更新完成：哪怕Promise已经resolve，React的状态更新和组件重渲染也需要触发时机，你没有等待重渲染完成就直接读取了挂载完成时的初始DOM快照。

修复方案 #

如果你使用Enzyme作为测试库 #

需要用act包裹异步渲染逻辑，强制等待所有状态更新和重渲染完成后再读取wrapper内容：

import { act } from 'react-dom/test-utils';

it('Should render fruit data', async () => {
  UTILS.getFruits = jest.fn().mockReturnValueOnce(Promise.resolve(mockFruitData));
  let wrapper;
  // 用act包裹异步渲染，等待所有状态更新完成
  await act(async () => {
    wrapper = mount(<DisplayFruits />);
  });
  // 手动更新wrapper获取最新DOM
  wrapper.update();
  console.log(wrapper.debug());
  // 后续可以加正常断言
});

如果你使用React Testing Library作为测试库 #

直接用异步查询API自动等待元素渲染即可：

it('Should render fruit data', async () => {
  UTILS.getFruits = jest.fn().mockReturnValueOnce(Promise.resolve(mockFruitData));
  render(<DisplayFruits />);
  // 填写你实际的水果列表选择规则，自动等待所有异步逻辑执行完成
  await screen.findByRole('list', { name: /水果列表/i });
  // 此时输出的就是更新后的DOM
  screen.debug();
});

额外注意点 #

你给出的组件示例中return语句的三元表达式外层缺少根节点，React18以下版本可能会触发语法报错，可以用空标签<>包裹返回内容：

return (
  <>
    {loading ? <div><LoadingIcon /> </div> : 
    <div> {/* display list of fruits */}</div>}
  </>
);

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