React Test-Utils点击按钮后测试UI未更新问题排查

你的单元测试未触发UI更新，核心原因是没有等待异步操作完成就进行断言，同时手动包裹act的方式不符合React Testing Library的最佳实践。

问题点拆解 #

1. userEvent.click是异步操作，状态更新（setEditMode(true)）需要时间，你直接同步执行后就去读取HTML，此时组件还未完成重渲染。
2. React Testing Library的render方法已经自动处理了act逻辑，不需要手动包裹。
3. 直接读取r.baseElement.outerHTML的时机太早，组件状态更新后的DOM还未生成。

修正后的测试代码 #

it.only('should display the edit page when the edit button is clicked', async () => {
  render(
    <MemoryRouter initialEntries={['/tickets/1']}>
      <Routes>
        <Route path='tickets/:ticketId' element={<TicketDetailPage />}></Route>
      </Routes>
    </MemoryRouter>
  )

  // 找到按钮并异步点击，等待状态更新完成
  const button = screen.getByTestId('editTicket')
  await userEvent.click(button);

  // 用屏幕查询断言编辑模式的UI（示例：假设编辑模式下有testId为editForm的表单）
  expect(screen.getByTestId('editForm')).toBeInTheDocument();
  
  // 若需快照，确保在状态更新后执行
  expect(r.baseElement.outerHTML).toMatchSnapshot()
})

额外注意事项 #

• 确认按钮正确触发onSubmit：比如按钮是type="submit"且在<form>内部，或直接绑定onClick调用onSubmit（需保证参数传递正确）。
• 优先使用React Testing Library的screen查询方法（如getByRole、getByLabelText）断言UI，而非直接操作outerHTML，更贴合测试用户行为的理念。

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