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.

Answer 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

Answer 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.