Skip to content

Instantly share code, notes, and snippets.

@javierarques

javierarques/jsdom-helper.js

Last active January 12, 2022 00:51
Show Gist options
  • Save javierarques/d95948ac7e9ddc8097612866ecc63a4b to your computer and use it in GitHub Desktop.
Save javierarques/d95948ac7e9ddc8097612866ecc63a4b to your computer and use it in GitHub Desktop.
Download ZIP
Simulate window resize event in jsdom
Raw
jsdom-helper.js
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
// Simulate window resize event
const resizeEvent = document.createEvent('Event');
resizeEvent.initEvent('resize', true, true);
global.window.resizeTo = (width, height) => {
global.window.innerWidth = width || global.window.innerWidth;
global.window.innerHeight = width || global.window.innerHeight;
global.window.dispatchEvent(resizeEvent);
};
Raw
test.js
const expect = require("chai").expect;
const Nav = require("../source/javascripts/nav");
const navFixture = require("./fixtures/nav")
const IS_OPEN_CLASS = 'is-open';
describe("Nav component", function() {
beforeEach(function() {
window.document.body.innerHTML = navFixture;
Nav.init();
});
it("closes the menu for screens bigger than 768px", () => {
const nav = document.getElementById("MainNav");
const toggle = document.getElementById("MainNav-toggle");
Nav.openMenu();
window.resizeTo(769, 1000);
expect(nav.classList.contains(IS_OPEN_CLASS)).to.be.false;
expect(toggle.classList.contains(IS_OPEN_CLASS)).to.be.false;
});
})
@sinapsist
Copy link

Probably somebody can help, please. I cannot figure out how to use jsdom-helper. Where should I put it? Should I import it somehow.
I tried to put this code into setupFile and then put it into jest.config.js like this:
jest: {
"setupFiles" : ["/setupFile.js"]
},
But it is still does not work. It does not complain when I do resizeTo, but when I run it it does not change height and width.

@goodbomb
Copy link

goodbomb commented Apr 1, 2019

Yeah, this doesn't seem to work for me either. From my understanding, JSDom does not draw anything so it doesn't support viewport size changes.

@arthurgeron
Copy link

It can be used in a exported function like this( I've changed the function a little, fixed a typo as well):

function resize(width, height) {
  const resizeEvent = document.createEvent('Event');
  resizeEvent.initEvent('resize', true, true);

  global.window.innerWidth = width || global.window.innerWidth;
  global.window.innerHeight = height || global.window.innerHeight;
  global.window.dispatchEvent(resizeEvent);
}

@agilgur5
Copy link

agilgur5 commented Mar 22, 2020 •
edited
Loading

So I recently made a very tiny window-resizeto testing polyfill to help simplify resize tests, thought I might share here for any readers.

If you're already using Jest:
jest.config.js:

module.exports = {
  setupFilesAfterEnv: [
    // polyfill window.resizeTo
    'window-resizeto/polyfill'
  ]
}

some-test.spec.js:

window.resizeTo(500, 500)
// window is now resize to 500x500

Can also use the polyfill standalone as just:

import 'window-resizeto/polyfill'

window.resizeTo(500, 500)
// window is now resized to 500x500

Or as a ponyfill:

import { resizeTo } from 'window-resizeto'

resizeTo(window, 500, 500)
// window is now resized to 500x500

All these examples are covered in the docs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment