Create-react-app: Error when using enzyme mount function

[leonardovillela]

Hello Guys,

I'm using the enzyme mount function for a test and when i run this test i get this error message:
It looks like you called mount() without a global document being loaded

My test

import React from 'react';
import { shallow, mount } from 'enzyme';
import { Layout } from './index';
import ErrorSnackbar from './errorSnackbar';

  it('should render ErrorSnackbar component when error prop is defined', () => {
    const errorStub = { message: chance.sentence() };
    const clearErrorMock = jest.fn();
    const wrapper = mount(
      <Layout loading={chance.bool()} clearError={clearErrorMock} pageTitle={chance.word()} error={errorStub} />
    );

    expect(wrapper.find(ErrorSnackbar).exists()).toBe(true);
    expect(wrapper.find(ErrorSnackbar).props()).error.toBe(errorStub);
    expect(wrapper.find(ErrorSnackbar).props()).clearError.toBe(clearErrorMock);
  })

package.json dev dependencies

"devDependencies": {
    "chance": "^1.0.13",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.0",
    "react-test-renderer": "^16.2.0",
    "redux-mock-store": "^1.4.0"
  },

setupTests.js

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

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

[gaearon]

Can you post your whole package.json?

[leonardovillela]

Thanks for the anwser, sure.

package.json

{
  "name": "redux-app",
  "version": "0.1.0",
  "engines": {
    "node": ">6",
    "npm": ">3"
  },
  "private": true,
  "dependencies": {
    "github-api": "^3.0.0",
    "lodash": "^4.17.4",
    "material-ui": "^0.20.0",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.17",
    "react-transition-group": "^2.2.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "typeface-roboto": "^0.0.50"
  },
  "devDependencies": {
    "chance": "^1.0.13",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.0",
    "react-test-renderer": "^16.2.0",
    "redux-mock-store": "^1.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "test:report": "npm test -- --coverage",
    "test:report:publish": "codecov",
    "eject": "react-scripts eject"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }
}

[gaearon]

This does look odd. Could you upload the minimal project reproducing it to GH?

[leonardovillela]

Unfortunately not, but if it is useful I can upload some files, tests for example.

[leonardovillela]

@gaearon I found the problem, I was running the tests through WebStormIDE and I actually gave this error when I ran the tests over there, but in command line works fine.

Thanks for attention, i will close the issue.

[gaearon]

Aah okay. cc @prigara

[leonardovillela]

If anyone wish to configure WebStorm to run Jest tests with CRA correct, i add the jest option --env=jsdom, in that way the tests runs fine.

WebStorm Jest Config

[prigara]

That's right, you need to pass --env=jsdom as an additional Jest option in the run configuration, the same way it's passed as an option to react-scripts test in package.json.

@gaearon, I was wondering why jsdom is not added to the jest config file inside react-scripts?

[gaearon]

The original idea was that jsdom is not really required and we want to nudge people to not depend on it in their tests (eg by using snapshot tests instead). Then they could remove the flag and enjoy faster test boot time.

Writing tests without depending on jsdom takes a bit of training to use correctly so we didn’t include those tests by default with the generated project.

I think we overestimated people’s curiosity. I thought people would try removing it, or at least read the relevant section in the user guide, but in practice everyone just leaves this flag on. It seems like most people don’t complain about test startup time either.

So maybe we should just flip the default to use jsdom.

[leonardovillela]

@gaearon you can post some examples using snapshot test for the scenario I posted? or just send some links.

Thanks.

[gaearon]

Jest has a snapshot test example on its website, I believe it should be sufficient.

[andriijas]

Thanks to this discussion, i removed jsdom because I mainly use snapshot testing and can now enjoy faster test boot time. Thanks! 🥂

[RommelLiang]

@leonardovillela hello could you tell me how to add the jest option --env=jsdom

[RommelLiang]

@leonardovillela I have already find the way at your projects redux-zero