React Testing Library：编写选择器测试时已等待act()执行结束仍出现调用重叠警告的原因咨询

这个警告的出现主要有两个核心问题，咱们一步步拆解：

1. 手动act()包裹异步操作的错误用法 #

你现在用act()包裹了userEvent.click，但**userEvent.click本身是异步函数**，而且React Testing Library和userEvent的新版本已经自动在内部处理了act()的包裹逻辑。手动用同步的act()包裹异步操作，会导致点击触发的组件更新还没完成，后续的查询操作就已经开始，相当于前一个act()还在执行，新的操作又触发了新的act()，直接引发重叠警告。

2. forEach无法正确等待异步断言 #

你在options.forEach里用了async回调，但forEach本身不会等待每个异步操作完成——所有的screen.findAllByText会几乎同时发起，多个异步查询同时触发act()调用，自然会出现重叠问题。

修正后的测试代码 #

test('Selection should have the correct number of options', async () => { 
  const leftClick = { button: 0 }; 
  const { options } = makeSUT(); 
  const selection = screen.getByLabelText('MultiSelection'); 

  // 直接await异步的userEvent.click，无需手动act()
  await userEvent.click(selection, leftClick); 

  // 用for...of循环依次等待每个异步断言完成
  for (const option of options) {
    const matchingElements = await screen.findAllByText(option.label);
    expect(matchingElements.length).toEqual(1);
  }
});

关键修正点： #

• 移除手动act()，改用await userEvent.click，确保点击操作和组件更新完全完成后再执行下一步；
• 把forEach换成for...of循环，保证每个异步查询和断言都依次完成，避免并发触发act()；
• 简化了重复的if/else逻辑，因为两种分支的断言完全一致。

另外补充个小知识点：React Testing Library的设计原则就是尽量避免手动使用act()，它的查询方法（findBy*系列）和用户事件方法都已经内置了act()的处理，手动调用反而容易踩坑。

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