profile
viewpoint

Ask questionsHow to mock the screen dimensions with useMediaQuery

I'm trying to mock the width and screen dimensions with Jest. I'm importing my matchMedia mock as described in the Jest documentation.

Looking at the useMediaQuery_test.js file there's this:

window.matchMedia.setConfig({
  type: 'screen',
  width: 1200,
  height: 800
})

I've tried adding that to my test but setConfig is undefined.

How do I go about to mock this?

contra/react-responsive

Answer questions contra

@dan-klasson The device prop context stuff was built specifically for testing - https://github.com/contra/react-responsive#supplying-through-context

In your test suite you can mock the device using this, either at the top-level or per test if you want to test different device configurations. It does not require you to do anything in your component differently, and it isn't really any different than what you're trying to do with window.matchMedia.setConfig except it actually works.

useful!
source:https://uonfu.com/
answerer
contra contra @staeco Phoenix, AZ https://contra.io Engineer/founder - @staeco • @gulpjs • @wearefractal • @genomejs + more
Github User Rank List