Question 73796 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why do I keep on getting "TypeError: Cannot read properties of undefined (reading 'matches')" when running a simple test on react testing library? – Reactjs

I have tried by best to figure out the issue but everything I tried so far has not been working.

This is what my App.js looks like:

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;

This is my 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()
})

This is a picture of the error messsage:
error

I tried using the history library, but that did not work. As well as the wrapper option and tried using BrowserRouter and nothing worked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The source of the problem is actually in the Reserve.js file, it is using useMediaQuery from chakra-ui

    This is a representation of the Reserve.js file:

    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>)
    }
}

    The optimum solution was to mock this hook and pass it a value in the test file, however I tried several mocking methods and each produced a different type of error.

    I was able to bypass the problem by giving the hook a constant value in the Reserve.js file during tests

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

    If any onlooker knows how to correctly mock this hook your help will be much appreciated!


  2. 0

    You should be wrapping your Routes with BrowserRouter in your App. Your test should also have this import:

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

    Using your code modified to test in this example sandbox I’m not having any issues.

    App.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;

    App.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();
});

    Also make sure you’re not using an outdated version of testing library with a new version of react.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search