reactjs 为什么我总是收到“TypeError：在react测试库上运行简单测试时，无法读取未定义(阅读“匹配”)”的属性？

7kqas0il 于 2023-03-16 发布在 React

关注(0)|答案(2)|浏览(92)

我已经尽了最大的努力来解决这个问题，但到目前为止，我所做的一切都没有奏效。
这是我的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()
})

这是错误消息的图片：error
我试过使用历史库，但没有效果。还有 Package 器选项，试过使用BrowserRouter，也没有效果。

reactjs

来源：https://stackoverflow.com/questions/75559960/why-do-i-keep-on-getting-typeerror-cannot-read-properties-of-undefined-readin

2条答案

按热度按时间

bz4sfanl1#

您应该在应用中使用BrowserRouter Package 您的Routes。您的测试还应该具有以下导入：
import "@testing-library/jest-dom";
使用您的代码修改测试在这个example sandbox我没有任何问题。

- 应用程序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;

- 保留. js**

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

export default Reserve;

- 应用程序测试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中使用过时版本的testing library。

赞(0）回复(0）举报 2023-03-01

mzillmmw2#

问题的根源实际上是在Reserve.js文件中，它正在使用chakra-ui中的useMediaQuery
以下是Reserve.js文件的表示形式：

import React from 'react'
import {useMediaQuery} from '@chakra-ui/react'

export default function Reserve() {
    const [isLargerThan800] = useMediaQuery('(min-width: 800px)')

    if (isLargerThan800 === true){
        render (<p>desktop</p>)
    }
    else {
        render (<p>mobile</p>)
    }
}

最佳的解决方案是模拟这个钩子并在测试文件中给它传递一个值，但是我尝试了几种模拟方法，每种方法都产生了不同类型的错误。
在测试过程中，我通过在Reserve.js文件中为钩子提供一个常量值来绕过这个问题

//const [isLargerThan800] = useMediaQuery('(min-width: 800px)')
let isLargerThan800 = true

如果任何旁观者知道如何正确地嘲笑这个钩你的帮助将不胜感激！

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 为什么我总是收到“TypeError：在react测试库上运行简单测试时，无法读取未定义(阅读“匹配”)”的属性？

2条答案

相关问题

热门标签

最新问答