"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 http://airbnb.io/enzyme/ — pizzarob, May 10 '17 at 20:03
you could also use karma for testing https://karma-runner.github.io/1.0/index.html — pizzarob, May 10 '17 at 20:04
I can't answer specifically as I've never tried to use the document object in Jest tests, but https://github.com/airbnb/enzyme is generally the goto tool for testing React components and is definitely worth checking out. — user3508122, May 10 '17 at 20:05
Possible duplicate of [error 'document' is not defined : eslint / React](https://stackoverflow.com/questions/42377038/error-document-is-not-defined-eslint-react) — Peter, Aug 04 '17 at 08:24
I just started running into this issue when upgrading from Jest v26 to v27, and it turns out the default `testEnvironment` [changed](https://github.com/facebook/jest/pull/9874) from `jsdom` to `node`. — dvanoni, Sep 17 '21 at 23:24

score 60 · Accepted Answer · answered Sep 17 '17 at 07:55

60

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 '17 at 07:55

HalfWebDev

7,022
12
65
103

score 38 · Answer 2 · answered Jun 05 '21 at 00:35

38

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

testEnvironment: 'jsdom'

answered Jun 05 '21 at 00:35

h-rai

3,636
6
52
76

1

Thanks. I like this answer cause I don't have to edit package.json myself. – Lucas Andrade Aug 06 '21 at 18:50
2

I think this is the best answer! – Alyona Aug 12 '21 at 14:51
this is the best answer because use the jest config file to set up this environment, brilliant. – nima Sep 05 '21 at 15:11
2

This worked, just make sure you have `jest-environment-jsdom`. – leonardofmed Jan 11 '23 at 12:21

score 26 · Answer 3 · answered Sep 17 '19 at 16:25

26

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

/**
 * @jest-environment jsdom
 */

signals jest to mock document and window.

answered Sep 17 '19 at 16:25

jlb

679
1
10
21

thanks, this was the only thing that worked! – dpacman Nov 25 '21 at 14:27

score 16 · Answer 4 · answered Aug 08 '20 at 09:57

16

In the package.json if using jest

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

answered Aug 08 '20 at 09:57

DALI RICHARD HILLARY

316
2
7

score 3 · Answer 5 · answered Sep 21 '21 at 10:53

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 '21 at 10:53

Slaven Bunijevac

89
1
8

1

It would be better to add this in the `package.json` under the `jest` object – William Oct 09 '21 at 20:02
Yes, William, I found that solution later. Thanks – Slaven Bunijevac Oct 11 '21 at 05:38

score 3 · Answer 6 · answered Nov 03 '22 at 08:21

3

In my case, the solution was:

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

answered Nov 03 '22 at 08:21

Andrew

91
5

score 2 · Answer 7 · answered Dec 15 '21 at 12:05

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 '21 at 12:05

João Dionísio Santos

29
2

score 0 · Answer 8 · answered Jun 16 '17 at 02:31

0

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

answered Jun 16 '17 at 02:31

0xcaff

13,085
5
47
55

score 0 · Answer 9 · answered Dec 19 '22 at 17:54

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;

score 0 · Answer 10 · answered Dec 25 '22 at 17:18

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.

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

10 Answers10

package.json file

Linked