React JS测试中实际与预期长度不符的原因咨询（附代码）

嘿，这个问题我之前也碰到过！核心原因是你没处理好测试里的异步时序——组件挂载后发起的axios请求是异步操作，但你的测试代码刚完成shallow渲染就立刻去断言DOM元素长度，这时候请求还没resolve、组件状态还没更新，所以state里的数组还是空的，li元素的长度自然是0啦。

给你两种可行的解决方法：

方法一：利用async/await结合wrapper.update() #

把测试函数改成异步函数，等待异步宏任务完成后，手动更新组件渲染，再进行断言：

it("axios call check or not", async () => { 
  const wrapper = shallow(<List />); 
  // 等待异步请求的Promise resolve，让组件完成状态更新
  await Promise.resolve();
  // 强制更新wrapper，同步最新的组件状态到DOM
  wrapper.update();
  expect(mockAxios.get).toHaveBeenCalledTimes(1); 
  expect(wrapper.find("li").length).toBe(2); 
});

方法二：直接等待mock请求的Promise完成 #

你可以直接等待mock的axios请求返回的Promise结束，确保组件已经拿到数据并更新状态：

it("axios call check or not", async () => { 
  const wrapper = shallow(<List />); 
  // 等待mock的axios请求完成
  await mockAxios.get.mock.results[0].value;
  // 更新组件渲染
  wrapper.update();
  expect(mockAxios.get).toHaveBeenCalledTimes(1); 
  expect(wrapper.find("li").length).toBe(2); 
});

补充一句：Enzyme的shallow渲染不会自动监听异步状态更新并重新渲染组件，所以必须手动调用wrapper.update()来让组件同步最新的状态到DOM结构里，这样你的断言才能拿到正确的元素长度~

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