1

I am trying to test responsive behavior of a component with react-testing-library and jest dom. The media query for the code being tested is working correctly in the browser. This is what I have for the setup...

 beforeAll(() => {
      window.resizeTo(767, 500);
    });

    it('should have correct styling for mobile', async () => {
      const {findByTestId} = render(
        <StepHeader index={1}>Future Step</StepHeader>,
      );

      console.log(window.innerWidth)
      const stepHeader = await findByTestId('step-header-button-1'); //the element has this test id on it.
      expect(stepHeader).toHaveStyle({fontSize: '16px', height: '48px'});
    });

The console log shows that the screen width is indeed what I expect it to be. But the test is not passing, it's actually picking up the styling for desktop, for instance the height of 36px instead of 48. What is the better way of testing responsive screens in react-testing library and jest-dom? Am I resizing the screen correctly? Thanks!

Yousuf Daramay
  • 127
  • 2
  • 12
  • Don't know if there's a solution, but there may be some leads in [this GH issue](https://github.com/ReactTraining/react-media/issues/93). – samuei Sep 02 '22 at 13:18

0 Answers0