Consider using the "jsdom" test environment error [Solved]

# Consider using the "jsdom" test environment error [Solved]

The error 'Consider using the "jsdom" test environment' occurs when we forget to set the testEnvironment property to jsdom when testing a client-side application with Jest.

To solve the error, set the testEnvironment property to jsdom in your jest.config.js file.

shell

Copied!
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.

ReferenceError: document is not defined

Make sure that the testEnvironment property is set to jsdom in your package.json or jest.config.js or jest.config.ts file.

package.json

Copied!
"jest": {
    "testEnvironment": "jsdom"
}

And do the same if you use a jest.config.js file.

jest.config.js

Copied!
module.exports = {
    "testEnvironment": "jsdom"
}

Setting the testEnvironment property to jsdom allows us to test in the browser. Note that jsdom is the default testEnvironment in recent versions of Jest.

When building a node service, set the testEnvironment property to node.

You can also set the test environment on a per-file basis with a docstring.

example.test.js

Copied!
/**
 * @jest-environment jsdom
 */

test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

The documentation string at the top of the file makes it so the specified environment will be used for all tests in the file.

Starting with Jest version 28, the jest-environment-jsdom package is no longer shipped with jest, so make sure you have it installed.

Open your terminal in your project's root directory and run the following command to install jest-environment-jsdom.

shell

Copied!
# 👇️ with NPM
npm install jest-environment-jsdom --save-dev

# 👇️ with YARN
yarn add jest-environment-jsdom --dev

If the error persists, install jest and make sure that your jest and jest-environment-jsdom versions match.

shell

Copied!
# 👇️ with NPM
npm install jest --save-dev
npm install jest-environment-jsdom --save-dev

# 👇️ with YARN
yarn add jest --dev
yarn add jest-environment-jsdom --dev

If your versions of jest and jest-environment-jsdom don't match, install a matching version of the packages.

You can check your versions of jest and jest-environment-jsdom in the devDependencies section of your package.json file.

Here is an example of installing version 29.3.1 of jest and jest-environment-jsdom.

shell

Copied!
# 👇️ with NPM
npm install jest@29.3.1 --save-dev
npm install jest-environment-jsdom@29.3.1 --save-dev

# 👇️ with YARN
yarn add jest@29.3.1 --dev
yarn add jest-environment-jsdom@29.3.1 --dev

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your test server.

shell

Copied!
# 👇️ Windows - delete node_modules and package-lock.json
rd /s /q "node_modules"
del package-lock.json

# 👇️ macOS/Linux - delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

Make sure to restart your IDE and test server if the error persists. VSCode often glitches and needs a reboot.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Consider using the "jsdom" test environment error [Solved]

# Consider using the "jsdom" test environment error [Solved]

# Additional Resources

Borislav Hadzhiev