Consider using the "jsdom" test environment

Question

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.

Solution 1

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]

{
    "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

Solution 2

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.

Comments

[Aniket]

thanks it worked!

[Andrej K]

I get "TypeError: TestEnvironment is not a constructor" is there also some npm that needs to be installed?

[Moistbobo]

@AndrejK you shouldn't need to install anything else. What type of project are you working on?

[Andrej K]

it's pure javascript/babel browser controls. It turned out when I downgraded Jest to 27 I didn't need to install anything while for the latest (v28) I had to add [jest-environment-jsdom] manually (even though it isn't mentioned anywhere)

[Moistbobo]

It seems my answer is in need of an update. Thanks for the information!

[maryam]

Finally, I found the answer! Thank you.