Testing Responsive Layouts with Jest+React Testing Library

setup.tsx

import matchMediaPolyfill from 'mq-polyfill';

matchMediaPolyfill(window);

window.matchMedia('(max-width: 640px)');
window.matchMedia('(max-width: 768px)');
window.matchMedia('(max-width: 1024px)');
window.matchMedia('(max-width: 1280px)');

window.resizeTo = function resizeTo(width, height): void {
  Object.assign(this, {
    innerWidth: width,
    innerHeight: height,
    outerWidth: width,
    outerHeight: height,
  }).dispatchEvent(new this.Event('resize'));
};

test('whatever you're testing', () => {
  window.resizeTo(768, 1280);
  // ...expect yadah yadah
})