javascriptjestjsjsdomava

How to setup jsdom when working with jest


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.


Solution

  • 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' });