使用React Testing Library测试表单提交与preventDefault问题排查

问题根源 #

1. 手动用dispatchEvent模拟点击，不如测试库工具贴合真实用户行为——submit按钮点击会触发表单的submit事件，而非单纯的按钮click事件，手动模拟可能未触发完整流程。
2. 未正确模拟window.location或路由跳转行为，测试环境无法直接触发真实浏览器跳转。
3. 不必要的act包裹，@testing-library/react的render已自动处理act逻辑。

修正步骤与代码示例 #

1. 确保组件逻辑完整

假设你的组件使用React Router跳转，补全后的form.js：

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

function XYZ() {
  const navigate = useNavigate();

  const submit = (e) => {
    e.preventDefault();
    // 执行跳转逻辑
    navigate('/expectedPath');
  };

  return (
    <form onSubmit={submit}>
      <button type="submit" data-testid="submit-login-btn">click me</button>
    </form>
  );
}

export default XYZ;

2. 修正测试用例

使用@testing-library/user-event模拟真实点击，结合MemoryRouter处理路由：

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import XYZ from './form';

it("点击按钮跳转到目标路径", async () => {
  const user = userEvent.setup();

  render(
    <MemoryRouter>
      <XYZ />
    </MemoryRouter>
  );

  const submitBtn = screen.getByTestId("submit-login-btn");
  await user.click(submitBtn);

  // 验证路由跳转：可通过检查目标页面内容或路由状态
  await waitFor(() => {
    // 假设目标页面有特定文本，替换成实际内容
    expect(screen.getByText('目标页面内容')).toBeInTheDocument();
  });
});

3. 若使用window.location跳转的测试方案

如果组件直接用window.location.href跳转，需要mockwindow.location：

it("点击按钮跳转到目标路径", async () => {
  // 备份原始location并mock
  const originalLocation = window.location;
  delete window.location;
  window.location = { ...originalLocation, pathname: '' };

  const user = userEvent.setup();
  render(<XYZ />);

  const submitBtn = screen.getByTestId("submit-login-btn");
  await user.click(submitBtn);

  expect(window.location.pathname).toEqual("/expectedPath");

  // 恢复原始location
  window.location = originalLocation;
});

关键注意点 #

• 优先使用userEvent而非手动dispatchEvent，它会模拟真实用户的交互流程，包括事件冒泡、默认行为处理。
• 涉及路由跳转时，必须用MemoryRouter包裹组件，确保测试环境有路由上下文。
• 若跳转依赖window.location，需手动mock该对象，因为测试环境中window.location默认只读。

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