Last active
January 12, 2022 00:51
-
-
Save javierarques/d95948ac7e9ddc8097612866ecc63a4b to your computer and use it in GitHub Desktop.
Simulate window resize event in jsdom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}) |
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);
}
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
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.