React Testing中userEvent无法正常工作 登录跳转测试用例执行失败

问题根因 #

测试用例失败是两个常见的React测试逻辑错误导致的：

• 没有处理异步更新逻辑：点击登录按钮后，不管是内部状态切换还是路由跳转，都属于异步操作，DOM更新存在延迟。原测试代码是同步执行的，执行断言时登录页元素还没完成卸载，所以断言失败。
• 错误使用getBy*查询做否定断言：getBy*系列方法匹配不到元素时会直接抛出错误终止测试，而非返回null，完全不适合用于「校验元素不存在」的场景。

修复方案 #

1. 给测试函数添加async标识，所有userEvent操作都加await等待事件执行完成
2. 异步查询首页元素使用findBy*方法，该方法自带重试等待逻辑，最长默认等待1000ms，适配异步渲染场景
3. 校验登录表单元素不存在时，改用queryBy*系列查询方法，匹配不到元素时会返回null，可正常对接否定断言

修正后测试代码 #

test('login successfully hides login page and shows home', async () => {
  render(<App />);

  await userEvent.type(screen.getByTestId('employeeId'), 'aryan');
  await userEvent.click(screen.getByText(/login/i));

  // 等待首页元素渲染完成
  const homeElement = await screen.findByText(/home screen/i);
  expect(homeElement).toBeInTheDocument();

  // 用queryBy校验输入框不存在
  expect(screen.queryByTestId('employeeId')).not.toBeInTheDocument();
});

补充注意项 #

如果你的跳转逻辑依赖React Router，测试时请用MemoryRouter包裹App组件，避免浏览器环境的路由依赖导致测试异常：

import { MemoryRouter } from 'react-router-dom';

// render时改为
render(<MemoryRouter><App /></MemoryRouter>);

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