"ReferenceError: document is not defined" when trying to test a create-react-app project

Question

This is my __tests__/App.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/containers/App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

// sanity check
it('one is one', () => {
  expect(1).toEqual(1)
});

And this is the output I get when running yarn test:

FAIL  __tests__/App.js
  ● renders without crashing

    ReferenceError: document is not defined

      at Object.<anonymous>.it (__tests__/App.js:6:15)

  ✕ renders without crashing (1ms)
  ✓ one is one

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.128s, estimated 1s
Ran all test suites related to changed files.

Do I need to import another module in order for document to be available here?

Thanks for the help!

document isn't available in a node environment. you should check out enzyme for testing react components airbnb.io/enzyme — pizzarob
– pizzarob, Commented May 10, 2017 at 20:03
you could also use karma for testing karma-runner.github.io/1.0/index.html — pizzarob
– pizzarob, Commented May 10, 2017 at 20:04
I can't answer specifically as I've never tried to use the document object in Jest tests, but github.com/airbnb/enzyme is generally the goto tool for testing React components and is definitely worth checking out. — user3508122
– user3508122, Commented May 10, 2017 at 20:05
Possible duplicate of error 'document' is not defined : eslint / React — Vishal
– Vishal, Commented Aug 4, 2017 at 8:24

HalfWebDev · Accepted Answer · 2017-09-17 07:55:04Z

70

For me either of these worked

In package.json file adding test script env flag

"scripts": {
   "test": "react-scripts test --env=jsdom"
}

Using enzyme

 import { shallow } from 'enzyme';

 it('renders without crashing', () => {
  shallow(<App />);
 });

answered Sep 17, 2017 at 7:55

HalfWebDev

7,74814 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

h-rai · Accepted Answer · 2021-06-05 00:35:16Z

50

I set the value in jest.config.js to below and it worked:

testEnvironment: 'jsdom'

answered Jun 5, 2021 at 0:35

h-rai

4,0548 gold badges56 silver badges82 bronze badges

4 Comments

Lucas Andrade Over a year ago

Thanks. I like this answer cause I don't have to edit package.json myself.

Alyona Over a year ago

I think this is the best answer!

nima Over a year ago

this is the best answer because use the jest config file to set up this environment, brilliant.

leonardofmed Over a year ago

This worked, just make sure you have jest-environment-jsdom.

jlb · Accepted Answer · 2019-09-17 16:25:37Z

28

Placing the comment at the top of your unit-test source

/**
 * @jest-environment jsdom
 */

signals jest to mock document and window.

answered Sep 17, 2019 at 16:25

jlb

7031 gold badge10 silver badges22 bronze badges

Comments

DALI RICHARD HILLARY · Accepted Answer · 2020-08-08 09:57:55Z

17

In the package.json if using jest

"scripts":{
      "test": "jest --env=jsdom"
}

answered Aug 8, 2020 at 9:57

DALI RICHARD HILLARY

3462 silver badges7 bronze badges

Comments

Andrew · Accepted Answer · 2022-11-03 08:21:02Z

7

In my case, the solution was:

Add field testEnvironment: "jsdom" to jest.config.js
npm i jest-environment-jsdom -D

answered Nov 3, 2022 at 8:21

Andrew

3402 silver badges6 bronze badges

Comments

Slaven Bunijevac · Accepted Answer · 2021-09-21 10:53:28Z

3

I have just run into this issue, September 2021. I am learning testing in react and I resolved this issue by entering node_modules folder. Inside that folder there is a jest folder. Inside jest folder there is a package.json file. Inside that package.json file I inserted one thing. Similar to what someone mentioned above.

package.json file

"testEnvironment": "jsdom"

I know generally I should not edit node_modules folder, but just for thesake of continuing to learn this will have to do.

I do not know whether some other solution would be necessary for a more serious project.

answered Sep 21, 2021 at 10:53

Slaven Bunijevac

891 silver badge8 bronze badges

2 Comments

William Over a year ago

It would be better to add this in the package.json under the jest object

Slaven Bunijevac Over a year ago

Yes, William, I found that solution later. Thanks

João Dionísio Santos · Accepted Answer · 2021-12-15 12:05:26Z

2

put this on top of your index.test.js ( or test file). Don´t put it on the middle or end.

/** * @jest-environment jsdom */

answered Dec 15, 2021 at 12:05

João Dionísio Santos

292 bronze badges

Comments

technik · Accepted Answer · 2022-12-19 17:54:29Z

1

In my case, I am using Mocha instead of Jest and I had to assign manually jsdom to the global.document. May not sound like a perfect solution but it's any.

In .mocharc.yml add a path to the file jsdom-loader.js:

require: ['@babel/register',
          'test/jsdom-loader']

jsdom-loader.js

const { JSDOM } = require('jsdom');
const environment = new JSDOM('');
const { document } = environment.window;
global.document = document;

answered Dec 19, 2022 at 17:54

technik

1,09611 silver badges17 bronze badges

1 Comment

rbrc Over a year ago

this solution is working well for me in jest and allowing me to run server side tests next to react component tests in the same jest setup.

0xcaff · Accepted Answer · 2017-06-16 02:31:22Z

0

If you are using create-react-app, make sure to run yarn test instead of yarn jest or something else.

answered Jun 16, 2017 at 2:31

0xcaff

13.8k5 gold badges52 silver badges57 bronze badges

Comments

rachOS · Accepted Answer · 2022-12-25 17:18:37Z

0

I solved the problem by changing the file extension from myfile.test.ts => myfile.test.tsx ... in addition to the above solutions. Indeed, I had a TS error with @testing-library/react at render(<MyComponent/>) in my .test.ts file, and by changing the extension all problems were solved.

answered Dec 25, 2022 at 17:18

rachOS

1231 silver badge8 bronze badges

Comments

Farid · Accepted Answer · 2024-02-01 20:48:15Z

0

I had same problem in vitest. The default environment in Vitest is a Node.js environment. If you are building a web application, you can use browser-like environment through either jsdom or happy-dom instead. doc There are three ways you can add env for your test:

In package.json file add

{
   "scripts":{
       "test": "vitest --environment=jsdom"
   }
}

In vitest.config.ts file add:

export default defineConfig({
   environment: 'jsdom'
})

Add the below code at the top of your test file

/**
 * @vitest-environment happy-dom
 */

edited Feb 1, 2024 at 20:48

answered Jan 31, 2024 at 13:10

Farid

4734 silver badges10 bronze badges

Collectives™ on Stack Overflow

"ReferenceError: document is not defined" when trying to test a create-react-app project

11 Answers 11

Comments

4 Comments

Comments

Comments

Comments

package.json file

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

4 Comments

Comments

Comments

Comments

package.json file

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related