In your package.json, or jest.config.js/jest.config.ts file, change the value of the testEnvironment property to jsdom.
package.json
"jest":{
"testEnvironment": "jsdom"
}
jest.config.[js|ts]
module.exports = {
"testEnvironment": "jsdom"
}
Important note for jest >28
If you are using jest 28, you will need to install jest-environment-jsdom separately by either:
npm: npm i jest-environment-jsdom --save-dev
yarn: yarn add -D jest-environment-jsdom
Why?
By default, jest uses the node testEnvironment. This essentially makes any tests meant for a browser environment invalid.
jsdom is an implementation of a browser environment, which supports these types of UI tests.
For Jest version 28 and greater, jest-environment-jsdom was removed from the default jest installation to reduce package size.
Additional reading
jest testEnvironment documentation
Jest 28 breaking changes
Answer from Moistbobo on Stack OverflowIn your package.json, or jest.config.js/jest.config.ts file, change the value of the testEnvironment property to jsdom.
package.json
"jest":{
"testEnvironment": "jsdom"
}
jest.config.[js|ts]
module.exports = {
"testEnvironment": "jsdom"
}
Important note for jest >28
If you are using jest 28, you will need to install jest-environment-jsdom separately by either:
npm: npm i jest-environment-jsdom --save-dev
yarn: yarn add -D jest-environment-jsdom
Why?
By default, jest uses the node testEnvironment. This essentially makes any tests meant for a browser environment invalid.
jsdom is an implementation of a browser environment, which supports these types of UI tests.
For Jest version 28 and greater, jest-environment-jsdom was removed from the default jest installation to reduce package size.
Additional reading
jest testEnvironment documentation
Jest 28 breaking changes
This can be solved on a per-test-file basis by adding a @jest-environment docblock to the beginning of your file. For example:
/** @jest-environment jsdom */
import React from 'react'
import { render } from '@testing-library/react'
import Button from '.'
describe('Button', () => {
it('renders button without crashing', () => {
const label = 'test'
render(<Button label={label} />)
})
})
If your project has a mix of UI and non-UI files, this is often preferable to changing the entire project by setting "testEnvironment": "jsdom" within your package.json or Jest config. By skipping initializing the JSDom environment for non-UI tests, Jest can run your tests faster. In fact, that's why Jest changed the default test environment in Jest 27.
» npm install jest-environment-jsdom
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' });
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 -D jest-environment-jsdom
credit to: https://stackoverflow.com/a/72013609/7089048
» npm install jest-environment-jsdom-global