It looks like you called `mount()` without a global document being loaded. #341

svnm · 2016-04-22T02:54:29Z

I get the following error trying to call mount to test refs on my component.

import expect from 'expect'
import test from 'tape'
import React from 'react'
import { shallow, mount } from 'enzyme'
import Visit from '../../components/Visit'

test('Visit component', (assert) => {

  const component = shallow(<Visit visited={test} />)
  const wrapper = mount(<Visit />)

  assert.equal(
    component.find('span').text(), '', 'the visit component has no text'
  )

  assert.pass(
    expect(wrapper.ref('visit').prop('visited')).to.equal(false)
  )
  assert.end()
});

The text was updated successfully, but these errors were encountered:

svnm · 2016-04-22T03:21:10Z

It looks like I just needed to add jsdom for mount as mentioned is this issue and in the docs

Something like this:

import expect from 'expect'
import test from 'tape'
import React from 'react'
import { shallow, mount } from 'enzyme'
import Visit from '../../components/Visit'

import jsdom from 'jsdom'
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.document = doc
global.window = doc.defaultView

test('Visit component', (assert) => {

  const testVisit = () => {
    console.log('just visiting...')
  }

  const component = shallow(<Visit />)
  const wrapper = mount(<Visit visited={testVisit} />)

  assert.equal(
    component.find('span').text(), '', 'the visit component has no text'
  )

  assert.pass(
    expect(component.find('span').text(), '')
  )

  assert.equal(
    wrapper.props().visited, testVisit, 'the visit component has a visited prop'
  )

  assert.end()
});

muneermuhammed · 2016-06-16T06:30:57Z

+1

wilfredjonathanjames · 2016-07-07T22:38:46Z

The same, without binding jsdom in every test file: https://github.com/rstacruz/jsdom-global#mocha

abdennour · 2016-11-26T05:39:01Z

npm install --save-dev --save-exact jsdom jsdom-global

Then :

import 'jsdom-global/register'; //at the top of file , even  , before importing react

Without need of adding code in beforeEach and afterEach.

JoeCostanzo · 2016-12-09T21:17:35Z

@abdennour 's fix was right for me, as other ways wanted global navigator defined/mocked, on top of also spoofing document and window with jsdom, etc. This one's easier.

stereodenis · 2017-03-17T12:22:37Z

@StevenIseki @abdennour
what about react-native? I got this issue
when I try the solutions above — I got console.error about unpermitted properties

wilomgfx · 2017-03-21T15:36:14Z

@stereodenis as i understand by the docs you can't use mount with react-native as it depends on "browser-like environment" using js-dom.

We have to use shallow

React native source : https://github.com/airbnb/enzyme/blob/master/docs/guides/react-native.md

Mount API : https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md

makemek · 2017-06-09T09:44:24Z

@abdennour
You can also add -r jsdom-global/register as a mocha flag so that you don't have to import it every time in the code.
For example, in package.json

"test": "mocha --compilers js:babel-core/register -r jsdom-global/register"

chloerice · 2017-11-22T22:02:25Z

For future readers with similar troubleshooting, if you're using enzyme to test React and need to test Full DOM Rendering, use Jest to run your tests and you'll be golden as it comes with jsdom baked in and properly set up.

(except for the dom ones that are necessary) enzymejs/enzyme#341

flavio-dev · 2018-01-30T11:23:41Z

@chloerice I am having this error as trying to test a react native component using Enzyme and Jest.

I installed all the bits as devDependencies:

 "enzyme": "^3.3.0",
 "enzyme-adapter-react-16": "^1.1.1",
 "jest": "22.1.4",
 "react-addons-test-utils": "^15.6.2",
 "react-dom": "^16.2.0",
 "react-native-mock": "^0.3.1",
 "react-test-renderer": "16.2.0"

and I have obv in my dependencies:

 "react": "^16.2.0",
 "react-native": "0.52.0",

my test

import React from 'react';
import { mount } from 'enzyme'

...

  it('renders correctly a list using Enzyme', async () => {
    const wrapper = mount(
      <UserView
         blabla={...}
      />
    );
});

Any idea what's missing?

I do have these two warnings:

warning " > [email protected]" has incorrect peer dependency "react-dom@^15.4.2".
warning "react-native-mock > [email protected]" has incorrect peer dependency "react@^15.6.2".

when installing the packages.

chloerice · 2018-01-30T11:40:26Z

@flavio-dev try removing the async keyword. And definitely fix those dependencies (highly recommend upgrading everything to react 16 if you're able to). Also react-addons-test-utils is deprecated as of react 15.5.0.

flavio-dev · 2018-01-30T12:25:57Z

thank you for your response. I need that async keyword as I am attempting to test a fully rendered component that has a fetch at componentDidMount() lifecycle (setting a state that updates the view). Hence the mount() over shallow(), and the async as there will be an await late in the test.

I hope this is correct in terms of approach.

My react version in dependencies is 16.2.0. I didn't know about react-addons-test-utils being deprecated so thank you for this. Will try to fix the warnings somehow and see.

chloerice · 2018-01-30T12:48:01Z

@flavio-dev be sure to update all other react-related dependecies to 16^ as well (react-dom etc). Even if you plan to test the async method called in the componentDidMount, putting an async at the front of the test's callback will not do what it sounds like you mean it to (and it's not necessary).

flavio-dev · 2018-01-30T12:52:40Z

it does work for my current tests using renderer tho:

import * as dependency from '../fetch';

...

pp = Promise.resolve(JSON.stringify({users: [...]}))
dependency.default = jest.fn(() => pp)

it('renders correctly the users', async () => {
    const tree = renderer.create(
      <UsersView
        fetchUsersUrl={'test'}
        ...
      />
    );

    await pp;

    expect(dependency.default).toBeCalledWith('test');
    expect(tree.toJSON()).toMatchSnapshot();
  });

flavio-dev · 2018-01-30T14:45:04Z

reported my issue with full details here: #1501

fabb · 2019-01-18T07:03:03Z

Nowadays, just edit your jest.config.js:

testEnvironment: 'jsdom',

panmona · 2019-04-03T19:30:33Z

If you use jest you can use --env=jsdom

jonasantonelli · 2019-06-10T14:28:11Z

You should put a comment at the top of your file

/**
 * @jest-environment jsdom
 */

Probably it will work!

LucasNeevs · 2020-03-23T13:44:40Z

npm install --save-dev --save-exact jsdom jsdom-global

Then :

import 'jsdom-global/register'; //at the top of file , even  , before importing react

Without need of adding code in beforeEach and afterEach.

Solve my problem with success! Thnx bro.

shonmorgun · 2021-06-04T08:34:59Z

Add this configuration property to your Jest config file jest.config.js

testEnvironment: 'jsdom'

NOTE: no need to install jsdom and json-global since Jest comes with jsdom

Signed-off-by: Steve Ellis <[email protected]>

svnm closed this as completed Apr 22, 2016

mpace965 mentioned this issue Feb 11, 2017

Add active view test FireSoul1/408Proj#21

Merged

alex028502 pushed a commit to alex028502/sunset-clock that referenced this issue Nov 30, 2017

stop using global variables in enzyme test

a773336

(except for the dom ones that are necessary) enzymejs/enzyme#341

panmona mentioned this issue Apr 3, 2019

Watch mode crashes with ProcessTerminatedError in new test pattern mode jestjs/jest#2979

Closed

bartaz mentioned this issue Jun 21, 2021

Update jest monorepo (major) canonical/react-components#485

Merged

1 task

se3000 pushed a commit to smartcontractkit/chainlink that referenced this issue Oct 6, 2021

fix: jest needs jsdom config enzymejs/enzyme#341

1b4fd15

Signed-off-by: Steve Ellis <[email protected]>

HenryNguyen5 pushed a commit to smartcontractkit/operator-ui that referenced this issue Sep 2, 2022

fix: jest needs jsdom config enzymejs/enzyme#341

e882bd3

Signed-off-by: Steve Ellis <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

It looks like you called `mount()` without a global document being loaded. #341

It looks like you called `mount()` without a global document being loaded. #341

svnm commented Apr 22, 2016 •

edited

Loading

svnm commented Apr 22, 2016 •

edited

Loading

muneermuhammed commented Jun 16, 2016

wilfredjonathanjames commented Jul 7, 2016

abdennour commented Nov 26, 2016 •

edited

Loading

JoeCostanzo commented Dec 9, 2016

stereodenis commented Mar 17, 2017

wilomgfx commented Mar 21, 2017

makemek commented Jun 9, 2017

chloerice commented Nov 22, 2017 •

edited

Loading

flavio-dev commented Jan 30, 2018

chloerice commented Jan 30, 2018

flavio-dev commented Jan 30, 2018 •

edited

Loading

chloerice commented Jan 30, 2018

flavio-dev commented Jan 30, 2018

flavio-dev commented Jan 30, 2018

fabb commented Jan 18, 2019

panmona commented Apr 3, 2019

jonasantonelli commented Jun 10, 2019 •

edited

Loading

LucasNeevs commented Mar 23, 2020

shonmorgun commented Jun 4, 2021

It looks like you called mount() without a global document being loaded. #341

It looks like you called mount() without a global document being loaded. #341

Comments

svnm commented Apr 22, 2016 • edited Loading

svnm commented Apr 22, 2016 • edited Loading

muneermuhammed commented Jun 16, 2016

wilfredjonathanjames commented Jul 7, 2016

abdennour commented Nov 26, 2016 • edited Loading

JoeCostanzo commented Dec 9, 2016

stereodenis commented Mar 17, 2017

wilomgfx commented Mar 21, 2017

makemek commented Jun 9, 2017

chloerice commented Nov 22, 2017 • edited Loading

flavio-dev commented Jan 30, 2018

chloerice commented Jan 30, 2018

flavio-dev commented Jan 30, 2018 • edited Loading

chloerice commented Jan 30, 2018

flavio-dev commented Jan 30, 2018

flavio-dev commented Jan 30, 2018

fabb commented Jan 18, 2019

panmona commented Apr 3, 2019

jonasantonelli commented Jun 10, 2019 • edited Loading

LucasNeevs commented Mar 23, 2020

shonmorgun commented Jun 4, 2021

It looks like you called `mount()` without a global document being loaded. #341

It looks like you called `mount()` without a global document being loaded. #341

svnm commented Apr 22, 2016 •

edited

Loading

svnm commented Apr 22, 2016 •

edited

Loading

abdennour commented Nov 26, 2016 •

edited

Loading

chloerice commented Nov 22, 2017 •

edited

Loading

flavio-dev commented Jan 30, 2018 •

edited

Loading

jonasantonelli commented Jun 10, 2019 •

edited

Loading