Jest / Enzyme - How to test at different viewports? - jestjs

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 do something at a certain viewport width.', () => {
global.innerWidth = 2000;
const component = mount(<SomeComponent />);
...
});
I also found an article that explains how to do it using JSDom, but as Jest now ships with JSDom, I wondered if there was a native solution.
https://www.codementor.io/pkodmad/dom-testing-react-application-jest-k4ll4f8sd

Answer 1

Background Information:
jsdom does not implement window.resizeBy() or window.resizeTo()
jsdom defines the window innerWidth and innerHeight to be 1024 x 768
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 an example:
comp.js
import * as React from 'react';
export default class Comp extends React.Component {
constructor(...args) {
super(...args);
this.state = { width: 0, height: 0 }
}
updateDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
render() {
return <div>{this.state.width} x {this.state.height}</div>;
}
}
comp.test.js
import * as React from 'react';
import { shallow } from 'enzyme';
import Comp from './comp';
const resizeWindow = (x, y) => {
window.innerWidth = x;
window.innerHeight = y;
window.dispatchEvent(new Event('resize'));
}
describe('Comp', () => {
it('should display the window size', () => {
const component = shallow(<Comp />);
expect(component.html()).toEqual('<div>1024 x 768</div>');
resizeWindow(500, 300);
expect(component.html()).toEqual('<div>500 x 300</div>');
resizeWindow(2880, 1800);
expect(component.html()).toEqual('<div>2880 x 1800</div>');
});
});
Notes:
As of Enzyme v3 shallow calls React lifecycle methods like componentDidMount() so it can be used in place of mount
This answer borrows heavily from the information here, here, here, and #JoeTidee's own answer here.

Answer 2

If you're using TypeScript it will complain that window.innerWidth/innerHeight are readonly.
You can get around this with either redeclaring the property:
Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 105})
or using the Object.assign method:
window = Object.assign(window, { innerWidth: 105 });
Both not extremely nice solutions, but they work.

Answer 3

Works for me. Code is no longer marked as uncovered.
it('resize event listener changes the state', () => {
const wrapper = shallow(<Component />);
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);
...