How to set media queries with jest? - node.js

Question

I am currently trying to do a test on media queries but I can't figure out. How possibly I can change width of the window so it reflects to media query.
I have tried all commented code to mock the width but no use. I know it has something to do with jsdom but cant figure out.
it('when image is WIDE and media match with medium', () => {
Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 900})
// window.resizeBy = jest.fn();
// window.resizeBy(900,300);
//const mediaQuery = '(min-width: 790px)';
// Object.defineProperty(window, "matchMedia", {
// value: jest.fn(() => { return { matches: true,media: mediaQuery } })
// });
// Object.defineProperty(window,'innerWidth', {
// configurable: true,
// writable: true,
// value: 790
// });
// Object.defineProperty(window,'innerHeight', {
// configurable: true,
// writable: true,
// value: 900
// });
window.matchMedia = jest.fn().mockImplementation(query => {
//query always display (min-width: 240px) and (max-width: 767px)
return {
matches: true,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn(),
};
});
const result = imageStretcher(aWideImage);
expect(result).toEqual({ imgWidth: '90%', imgHeight: '40%' });
});
This is the code I want to test.
const screenResolution = {
smallSize: '(min-width: 240px) and (max-width: 767px)',
mediumSize: '(min-width: 768px) and (max-width: 1200px)',
};
const sizeTypes = {
smallSize: 'smallSize',
mediumSize: 'mediumSize',
normalSize: 'normalSize',
};
const sizeSettings = {
[PORTRAIT]: {
smallSize: { imgWidth: '62%', imgHeight: '50%' },
mediumSize: { imgWidth: '95%', imgHeight: '75%' },
normalSize: { imgWidth: '70%', imgHeight: '90%' },
},
[WIDE]: {
smallSize: { imgWidth: '90%', imgHeight: '30%' },
mediumSize: { imgWidth: '90%', imgHeight: '40%' },
normalSize: { imgWidth: '65%', imgHeight: '80%' },
},
};
const screenResolutionMatcher = (imageType: number) => {
if (window.matchMedia(screenResolution.smallSize).matches) {
return setNewImageSize(imageType, sizeTypes.smallSize);
} else if (window.matchMedia(screenResolution.mediumSize).matches) {
return setNewImageSize(imageType, sizeTypes.mediumSize);
} else {
return setNewImageSize(imageType, sizeTypes.normalSize);
}
};
export const imageStretcher = (source: string) => {
//....
return screenResolutionMatcher(imageType);
}
};

Answer 1

OK finally after having crazy rough time with this I have figured it out this way it test medium screen.
it('when image is WIDE and media match with medium', () => {
window.matchMedia = jest.fn().mockImplementation(query => ({
matches: query !== '(min-width: 240px) and (max-width: 767px)',
media: '',
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn()
}));
const result = imageStretcher(aWideImage);
expect(result).toEqual({ imgWidth: '90%', imgHeight: '40%' });
});