Jest / Enzyme - How to test at different viewports?

Question

I am trying to run a test on a component at a certain viewport width. I am doing the following, but this doesn\'t seem to change it:

test(\'Component should          


        

Answer 1

Works for me. Code is no longer marked as uncovered.

it('resize event listener changes the state', () => {
  const wrapper = shallow();
  const instance = wrapper.instance();

  instance.setState({
    mobileMode: true
  });

  global.innerWidth = 800;
  window.dispatchEvent(new Event('resize'));
  expect(instance.state.mobileMode).toBeFalsy();

  global.innerWidth = 600;
  window.dispatchEvent(new Event('resize'));
  expect(instance.state.mobileMode).toBeTruthy();
});

Resize listener inside my component

...
 resizeListener = () => {
      if (window.innerWidth < 768) {
        this.setState({
          mobileMode: true
        });
      } else {
        this.setState({
          mobileMode: false
        });
      }
    };
    window.addEventListener('resize', resizeListener);
...