» npm install @zeromake/jest-environment-jsdom-with-canvas
» npm install @bufbuild/jest-environment-jsdom
» npm install jest-environment-jsdom
» npm install jsdom
» npm install @testing-library/jest-dom
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
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.