使用React Testing Library测试时持续出现TypeError问题求助

运行React Testing Library执行简单测试时，反复出现TypeError: Cannot read properties of undefined (reading 'matches')错误，尝试过使用history库、wrapper选项、BrowserRouter等方法均未解决问题。

相关代码 #

App.js #

import './App.css';
import {ChakraProvider} from '@chakra-ui/react'
import Header from './components/Header'
import Hero from './components/Hero'
import Highlights from './components/Highlights.js'
import About from './components/About.js'
import Footer from './components/Footer.js'
import Reserve from './components/Reserve.js'
import '@fontsource/karla'
import '@fontsource/markazi-text'
import theme from './theme'
import { Routes, Route,} from "react-router-dom";

function Homepage(){
  return(
    <>
      <Hero/>
      <Highlights/>
      <About/>
      <Footer/>
    </>
  )
}
function App() {
  return (
    <ChakraProvider theme={theme}>
      <Header/>
      <main>
        <Routes>
          <Route path='/' element={<Homepage/>}/>
          <Route path='/Reservations' element={<Reserve/>}/>
        </Routes>
      </main>
    </ChakraProvider>
  );
}

export default App;

App.test.js #

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

test('render reservations page header', () => {
  render(
    <MemoryRouter>
      <Reserve />
    </MemoryRouter>
  )
expect(screen.getByText('Reservations')).toBeInTheDocument()
})

错误信息 #

TypeError: Cannot read properties of undefined (reading 'matches')

解决方向 #

1. 检查Reserve组件的路由依赖
   如果Reserve组件内部使用了useNavigate、useLocation等react-router钩子，或者包含依赖路由上下文的组件，需确保测试时组件能获取完整的路由上下文。另外也可以排查组件内是否有未处理的路由相关逻辑，导致渲染时出现undefined。

2. 同步依赖版本
   版本不兼容是这类错误的常见原因，执行以下命令更新相关依赖：

   npm update react-router-dom @testing-library/react @testing-library/dom
   

3. 使用自定义wrapper包裹完整上下文
   由于App中同时使用了ChakraProvider和路由，测试时需要同时提供这两个上下文。可以创建自定义render工具：

   // test-utils.js
   import { render } from '@testing-library/react';
   import { MemoryRouter } from 'react-router-dom';
   import { ChakraProvider } from '@chakra-ui/react';
   import theme from './theme';
   
   const customRender = (ui, options) => {
     return render(ui, {
       wrapper: ({ children }) => (
         <ChakraProvider theme={theme}>
           <MemoryRouter>{children}</MemoryRouter>
         </ChakraProvider>
       ),
       ...options,
     });
   };
   
   export * from '@testing-library/react';
   export { customRender as render };
   

   然后在测试中替换原render：

   import { render, screen } from './test-utils';
   import Reserve from './components/Reserve';
   
   test('render reservations page header', () => {
     render(<Reserve />);
     expect(screen.getByText('Reservations')).toBeInTheDocument();
   });
   

4. 调试渲染后的DOM结构
   在测试中添加screen.debug()，查看实际渲染的DOM，确认目标元素是否存在，或是否有组件未正确加载导致undefined对象出现。

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