Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: win.matchMedia is not a function during unit test

See original GitHub issue

Description

When I render a ChakraProvider inside a unit test (for example, to test a component which uses the useToast hook) an error is thrown by the color mode query function TypeError: win.matchMedia is not a function.

Link to Reproduction

https://github.com/stefee/chakra-repro-6036

Steps to reproduce

git clone git@github.com:stefee/chakra-repro-6036.git
cd chakra-repro-6036
npm install
npm test

Chakra UI Version

2.0.0

Browser

Jest

Operating System

macOS
Windows
Linux

Additional Information

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

3reactions

Patrick-Ullrichcommented, May 17, 2022

Hey @stefee, check out my PR to your sample repo: https://github.com/stefee/chakra-repro-6036/pull/1

Added typescript to get the sample project running
Added matchMedia to window.

For future reference in case the Repo will be deleted / the PR is gone:

Add a jest.setup.js (or .ts)

// jest.setup.js
beforeEach(() => {
  Object.defineProperty(window, "matchMedia", {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(), // Deprecated
      removeListener: jest.fn(), // Deprecated
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    })),
  });
});

Add a reference to your jest.setup.js/ts file in your jest.config.js/ts

module.exports = {
 ... rest of your config,
 setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
... rest of your config
}

Find some more info in the jest official documentation: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

This has little to do with chakra, but the fact that JSDOM (the DOM implementation used by Jest) has not implemented matchMedia, so you have to mock it.

0reactions

stefeecommented, May 17, 2022

This issue was fully resolved in the latest release of Chakra UI (2.0.2) so the manual mock is no longer required.