如何用React Testing Library测试按钮Saving状态（无需模拟API延迟）

不用模拟API延迟也能搞定这个测试，核心是利用React Testing Library的重试机制捕获一闪而过的状态。

你的测试代码问题在于，点击按钮后立即同步执行断言，这时候要么状态还没完成更新，要么已经恢复成原状态，自然抓不到目标状态。试试下面两种方法：

方法一：用waitFor重试断言 #

waitFor会周期性检查DOM，只要目标状态在默认超时时间（1秒）内出现过，就能被捕获：

test('按钮点击后短暂显示Saving', async () => {
  render(<你的组件 />);
  
  const saveButton = screen.getByRole('button', { name: 'Save' });
  fireEvent.click(saveButton);
  
  // 反复检查直到按钮的name属性变为Saving
  await waitFor(() => {
    expect(saveButton).toHaveAttribute('name', 'Saving');
  });
});

方法二：用findByRole直接查找目标状态的按钮 #

findByRole是getByRole和waitFor的组合，会自动等待目标元素出现：

test('按钮点击后短暂显示Saving', async () => {
  render(<你的组件 />);
  
  fireEvent.click(screen.getByRole('button', { name: 'Save' }));
  
  // 等待处于Saving状态的按钮出现
  await screen.findByRole('button', { name: 'Saving' });
});

这两种方法都不需要模拟API延迟，只要按钮确实在点击后出现过"Saving"状态（哪怕持续时间很短），测试都能成功捕获。

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