Jest: document is null when running Jest test with Create React App

[jcald1]

I'm running a Jest test, which is erroring out when I set state due to react-dom not finding document. I put a log statement in react-dom and I see that document is populated initially

  console.log node_modules/react-dom/cjs/react-dom.development.js:5066
    !!!! Document {
      location: [Getter/Setter],
      _reactListenersID0002526682692260973: 0 }

but later in the test execution it's null and that's the error I encounter in my Jest test.

  console.log node_modules/react-dom/cjs/react-dom.development.js:5066
    !!!! null

Error Message:

  console.log src/containers/App.js:266
    handleError TypeError: Cannot read property 'body' of null
        at getActiveElement (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5069:16)
        at getActiveElementDeep (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5334:17)
        at getSelectionInformation (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5366:21)
        at prepareForCommit (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:8689:26)
        at commitRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:17711:3)
        at completeRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19239:3)
        at performWorkOnRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19168:9)
        at performWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19076:7)
        at performSyncWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19050:3)
        at requestWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:18919:5)
        at scheduleWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:18728:5)
        at Object.enqueueSetState (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:12456:5)
        at App.Object.<anonymous>.Component.setState (/home/jc/projects/grip/grip-client/node_modules/react/cjs/react.development.js:375:16)
        at setState (/home/jc/projects/grip/grip-client/src/containers/App.js:250:14)
        at tryCatcher (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/util.js:16:23)
        at Promise._settlePromiseFromHandler (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:512:31)
        at Promise._settlePromise (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:569:18)
        at Promise._settlePromiseCtx (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:606:10)
        at _drainQueueStep (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:142:12)
        at _drainQueue (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:131:9)
        at Async.Object.<anonymous>.Async._drainQueues (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:147:5)
        at Immediate.Async.drainQueues [as _onImmediate] (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:17:14)
        at runCallback (timers.js:705:18)
        at tryOnImmediate (timers.js:676:5)
        at processImmediate (timers.js:658:5)

App.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { JSDOM } from 'jsdom';

import configureStore from '../../store/configureStore';

global.Promise = require('bluebird');
const util = require('util');

jest.mock('../../actions/simulationRuns');
let App;

describe('App', () => {
  beforeEach(() => {
    // Set up some mocked out file info before each test
    App = require('../App').default;
  });

  it('renders without crashing - mount', () => {
    const div = document.createElement('div');
    ReactDOM.render(
      <Router>
        <Provider store={configureStore()}>
          <Route path="/">
            <App />
          </Route>
        </Provider>
      </Router>,
      div
    );
  });
});

setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

I also tried adding

    Object.defineProperty(document, 'currentScript', {
      value: document.createElement('script')
    });

to setupTests.js and beforeEach.

[thymikee]

Do you have a repro? It's hard to tell what's wrong without it

[jcald1]

@thymikee , sure, here you go: https://github.com/jcald1/grip-client/tree/feature/258. Just need to copy .env.development to .env first.

[alflennik]

I'm seeing this exact error as well. React Dom can't find the document in the Jest environment.

[SimenB]

Please follow the issue template which includes asking for a reproduction

[cphoover]

I too am experiencing this issue but am getting the following error message:

 RUNS  src/core/flow-engine.test.tsx
/home/trpgb21/develop/updated-nasu/nasu-ae/node_modules/react-dom/cjs/react-dom.development.js:302
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null

[Gamelena]

I had the same issuen after upgrading from node 8.10.0 to 11.5.0.