在反应测试库上运行简单测试时，为什么我不断收到“TypeError：无法读取未定义的属性（读取“匹配”）”？

Question

我已尽最大努力找出问题所在，但到目前为止我尝试的一切都不起作用。

这就是我的 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()
})

这是错误消息的图片： 错误

我尝试使用历史库，但这不起作用。以及包装器选项并尝试使用 BrowserRouter 但没有任何效果。

Answer 1

您应该将您的Routeswith包装BrowserRouter在您的应用程序中。您的测试还应该具有以下导入：

import "@testing-library/jest-dom";

使用修改后的代码在此示例沙箱中进行测试，我没有遇到任何问题。

应用程序.js

import Reserve from "./Reserve.js";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Reserve />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Reserve.js

function Reserve() {
  return <span>Reservations</span>;
}

export default Reserve;

应用程序.test.js

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

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

还要确保您没有将过时版本的测试库与新版本的 React 一起使用。