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

Question

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.

naXa stands with Ukraine · Answer 1 · 2023-08-02T15:34:54.360

Yes, the error is related to the useMediaQuery hook. I'm using useMediaQuery from '@material-ui/core' library, but I hope that the fix is compatible with your library.

In React 18.2 project, addition of the following lines to setupTest.js file helped me to resolve the issue.

global.matchMedia = global.matchMedia || function() {
    return {
        matches: false,
        addListener: function() {},
        removeListener: function() {}
    }
}

^{src: Jest test fails: TypeError: window.matchMedia is not a function}

The official workaround that looks like Object.defineProperty(window, 'matchMedia', { ... }) doesn't work in React 18. Delete it, if you used it.

score 0 · Answer 2 · answered Feb 24 '23 at 18:30

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.

I followed your exact steps but still getting the same type error as before, also I am using react v18.2.0 and react testing library v13.4. Side note: I have run the same test on other react projects, the test runs and passes as expected, the only difference is I don't have routes on any of them. — Amro Ali, Feb 24 '23 at 20:05

score 0 · Answer 3 · answered Feb 27 '23 at 23:43

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!

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

3 Answers3