React V6版本中使用jest-dom测试库进行单元测试失败如何解决

你的测试运行失败的核心原因是React Router v6 运行需要路由上下文：你在App组件中使用了<Routes>、<Route>组件，但测试代码直接渲染<App/>时没有提供对应的路由容器（比如BrowserRouter/ MemoryRouter），导致<Routes>无法识别当前路径，无法渲染匹配到的<LandingPage>组件，自然找不到文本为Play的元素。

另外补充一个非报错类的优化点：React Router v6 中<Route>默认就是精确匹配，你写的exact属性已经废弃，可以直接删除。

修改测试代码，在渲染<App/>时外层包裹React Router提供的<MemoryRouter>（测试场景下优先用MemoryRouter，不会修改浏览器地址，更适合单测隔离），修改后的测试代码如下：

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('renders a button to enter', () => {
  render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );
  const linkElement = screen.getByText(/Play/i);
  expect(linkElement).toBeInTheDocument();
});

如果需要测试其他路径的渲染效果，可以给<MemoryRouter>传入initialEntries属性指定初始路径，示例如下：

// 测试/home路径的渲染效果
<MemoryRouter initialEntries={['/home']}>
  <App />
</MemoryRouter>

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