How to setup jsdom when working with jest

javascript jestjs jsdom ava
Gal Ziv picture Gal Ziv · Dec 5, 2016 · Viewed 17k times · Source

I'm trying to migrate from AVA to Jest. In AVA you can set ava.setup, in which you set the jsdom environment. For example, creating the DOM structure and doing necessary polyfills (localStorage).

How do I accomplish that in Jest? Currently, I'm using beforeEach in each test suite, which doesn't feel like the best solution.

Thanks in advance!

Answer

Rick Hanlon II picture Rick Hanlon II · Dec 5, 2016

Great question.

Jest actually ships with jsdom and the environment already configured. You can override it with the testEnvironment setting.

If you need to set up more aspects of the environment though, you can use the setupTestFrameworkScriptFile setting to point to a file that executes before all of your tests run.

For example, if you need window.yourVar to be available on the window for all your tests, you would add this to your package.json:

"jest": {
    "setupTestFrameworkScriptFile": "tests/setup.js"
}

And in tests/setup.js:

Object.defineProperty(window, 'yourVar', { value: 'yourValue' });

Related questions

unit test raises error because of .getContext() is not implemented

I am writing tests using Jest for components that use canvas elements. I keep getting an error when I run my tests that looks like this. Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) From my …

Read More
Mocking document.createRange for jest

Jest, through JSDom I imagine, does not have document.createRange defined. How can I overwrite or provide this behavior? The version we wrote for our custom JSDom + mocha setup (ran before all tests) looks like this: global.Range = function Range() {}; …

Read More
How can I mock an ES6 module import using Jest?

I want to test that one of my ES6 modules calls another ES6 module in a particular way. With Jasmine this is super easy -- The application code: // myModule.js import dependency from './dependency'; export default (x) => { dependency.…

Read More