How to set window size in jest test?

How should I setup a test where a different component is rendered depending on screen size?

This is the component:

<Media query={`(max-width: ${theme.screenSizes.sm.max}px)`}>
  {matches => (matches ? this.renderMobileView() : this.renderDesktopView())}
</Media>

It only executes renderDesktopView but I’d like to also test this.renderMobileView(). I’ve added this to my test global.window.innerWidth = 300; with no success

Issue Analytics

State:
Created 5 years ago
Reactions:10
Comments:17

Top GitHub Comments

25reactions

Khrystynacommented, Apr 26, 2019

I found a solution, maybe not the prettiest one, but it works. Method matchMedia takes media-query string as a parameter, so I am just matching it to the one I want to test:

global.matchMedia = media => ({
      addListener: () => {},
      removeListener: () => {},
      matches: media === '(min-width: 545px)',
});

3reactions

Khrystynacommented, Apr 19, 2019

@edorivai I am experiencing another issue, close to this one, maybe you can help me out.

I have component which has two <Media> components, one for mobile media query and another for desktop.

When I test it with jest, using your snippet above (matches: true,) it renders both components, obviously. How can I test, for example, mobile view, so only one component, the one for mobile query, is rendered? I tried solution with setting window.innerWidth and then triggering resize event, but it doesn’t help.

Top Results From Across the Web

Figuring out how to mock the window size changing for a react ...

I'm fairly new to testing and I'm trying to figure out a way I can write a test that resizes the window and...

Mock window events and properties in Jest - Alex Boffey

Here is the final test suite testing that useWindowSize correctly reads from window and updates when a resize event happens on window ....

[Solved]-How to test different screen widths using Jest-Reactjs

You can manually set the window width and height and fire the resize event as needed. Here is an example: comp.js import *...

Jest / Enzyme – How to test at different viewports - iTecNote

It is possible to simulate a window resize using jsdom by manually setting window.innerWidth and window.innerHeight and firing the resize event. Here is...

How to test responsiveness in Jest? Please help!! - Reddit

Navbar'; // stimulate different screen width beforeAll(() ... moxios.install(); }); test('Rendered navbar with 700px width', () => { window.