How to setup jsdom when working with jest

Question

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!

score 40 · Accepted Answer · edited May 31 '20 at 16:57

40

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

edited May 31 '20 at 16:57

mhchia

139
1
8

answered Dec 05 '16 at 21:38

Rick Hanlon II

20,549
7
47
53

1

I knew about the testEnvironment and default value but the 'setupTestFrameworkScriptFile' was what I was looking for. Thanks!! – Gal Ziv Dec 06 '16 at 10:49
one more thing, not totally related, which expect package do you recommend? I must have a custom message and jest-expect doesnt provide this option. – Gal Ziv Dec 06 '16 at 11:07
If you want to include a message I'd recommend https://www.npmjs.com/package/expect – Rick Hanlon II Dec 06 '16 at 20:22
1

`setupFilesAfterEnv` is recommended now. – bocai Dec 22 '21 at 12:13

David · Answer 2 · 2023-04-03T13:28:24.857

10

Update 2022. Version 28 does not ship jsdom by default anymore:

As of Jest 28 "jsdom" is no longer shipped by default, make sure to install it separately.

You'll need to install jsdom manually:

# npm
npm install -D jest-environment-jsdom
# yarn
yarn add jest-environment-jsdom

credit to: https://stackoverflow.com/a/72013609/7089048

edited Apr 03 '23 at 13:28

answered Jul 15 '22 at 15:21

David

425
4
9

1

should it be `npm install --save-dev jest-environment-jsdom`? – John Mar 31 '23 at 15:50
Absolutely, updated accordingly. – David Apr 03 '23 at 13:28

How to setup jsdom when working with jest

2 Answers2

Linked