Enzyme: It looks like you called `mount()` without a global document being loaded.
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()
});
svnm
All 19 comments
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()
});
+1
muneermuhammed
on 16 Jun 2016
The same, without binding jsdom in every test file: https://github.com/rstacruz/jsdom-global#mocha
wjagodfrey
on 8 Jul 2016
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.
abdennour
on 26 Nov 2016
@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.
JoeCostanzo
on 9 Dec 2016
@StevenIseki @abdennour
what about react-native? I got this issue
when I try the solutions above — I got console.error about unpermitted properties
stereodenis
on 17 Mar 2017
@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
wilomgfx
on 21 Mar 2017
@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"
makemek
on 9 Jun 2017
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.
chloerice
on 22 Nov 2017
@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.
flavio-dev
on 30 Jan 2018
@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.
chloerice
on 30 Jan 2018
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.
flavio-dev
on 30 Jan 2018
@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).
chloerice
on 30 Jan 2018
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();
});
reported my issue with full details here: https://github.com/airbnb/enzyme/issues/1501
flavio-dev
on 30 Jan 2018
Nowadays, just edit your jest.config.js:
testEnvironment: 'jsdom',
fabb
on 18 Jan 2019
If you use jest you can use --env=jsdom
maracuja-juice
on 3 Apr 2019
You should put a comment at the top of your file
/**
* @jest-environment jsdom
*/
Probably it will work!
jonasantonelli
on 10 Jun 2019
npm install --save-dev --save-exact jsdom jsdom-globalThen :
import 'jsdom-global/register'; //at the top of file , even , before importing reactWithout need of adding code in
beforeEachandafterEach.
Solve my problem with success! Thnx bro.
LucasNeevs
on 23 Mar 2020
Related issues
abe903
·
3Comments
aweary
·
3Comments
andrewhl
·
3Comments
blainekasten
·
3Comments
SandroMachado
·
3Comments
Most helpful comment
Then :
Without need of adding code in
beforeEachandafterEach.