0
455
ViewsConsider using the "jsdom" test environment
I have this simple test:
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} />)
})
})
And I have a jest.config.json with this content
{
"setupFilesAfterEnv": [
"<rootDir>/lib/settings/setupTests.ts"
]
}
And on my setupTests.ts I have
import '@testing-library/jest-dom'
When I run npm run test (which just run jest), I got the following error:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
What I am doing wrong? This used to work before an upgrade.
2 answers
Answer question0
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.
0
In your package.json, or jest.config.js/jest.config.js, change the value of the testEnvironment property to jsdom.
Package.json
"jest":{
"testEnvironment": "jsdom"
}
jest.config.[js|ts]
{
"testEnvironment": "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.