使用Jest和React Testing Library测试点击链接时的警告问题

这个错误源于jsdom（Jest使用的浏览器模拟环境）无法处理<a>标签的默认导航行为——当点击下载链接时，测试环境会尝试跳转到href指向的地址，但该行为在非真实浏览器中未被实现。以下是几个针对性的解决方法：

1. 拦截链接的默认导航行为 #

直接在测试中阻止链接的默认点击行为，同时触发组件的下载逻辑：

test('clicking the link should download a file and display an alert', async () => {
  const { getByRole } = render(<MyComponent />);
  const link = getByRole('link');

  // 模拟点击并阻止默认导航
  jest.spyOn(link, 'click').mockImplementation((e) => {
    e.preventDefault();
    // 手动调用组件绑定的点击处理函数
    link.onClick?.(e);
  });

  await fireEvent.click(link);

  expect(within(screen.getByRole('alert')).getByText(/File downloaded/i)).toBeInTheDocument();
});

2. 全局模拟window的导航方法 #

在测试文件头部或项目的setupTests.js中添加全局模拟，覆盖jsdom未实现的导航API：

beforeAll(() => {
  // 保存原始location对象
  const originalLocation = window.location;
  // 替换为包含模拟方法的对象
  window.location = {
    ...originalLocation,
    assign: jest.fn(),
    replace: jest.fn(),
    reload: jest.fn(),
  };
});

afterAll(() => {
  // 测试结束后恢复原始对象
  window.location = originalLocation;
});

或者更简洁的方式，直接模拟单个方法：

// 在测试用例前添加
jest.spyOn(window.location, 'assign').mockImplementation(() => {});

3. 使用user-event替代fireEvent #

@testing-library/user-event更贴近真实用户交互，配合阻止默认行为可以避免导航报错：

import userEvent from '@testing-library/user-event';

test('clicking the link should download a file and display an alert', async () => {
  const user = userEvent.setup();
  const { getByRole } = render(<MyComponent />);
  const link = getByRole('link');

  // 点击时阻止默认导航
  await user.click(link, { preventDefault: true });

  expect(within(screen.getByRole('alert')).getByText(/File downloaded/i)).toBeInTheDocument();
});

额外验证点 #

• 确认组件中的<a>标签已正确设置download属性，该属性会让浏览器触发下载而非页面跳转
• 如果组件使用自定义下载逻辑（如通过Fetch获取文件后生成Blob），需在测试中模拟这些异步操作（例如用jest.mock拦截Fetch请求）

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