Enzyme: "It looks like you called `mount()` without a global document being loaded." with Enzyme and React Native

[flavio-dev]

Current behavior

Testing a mount() returns this error.

So I started testing using react-test-renderer (still do for snapshots).
Then wanted to test a fully rendered component post componentDidMount() (as there is a fetch in there that populates the view) and see how many item rendered. I therefore wanted to use mount().

I installed Enzyme, then got the adapter for my version of React, then got react-dom as it seems like it's needed as dependency, then got react-native-mockas it's recommended.
Then realised that react-native-mock wasn't working with my version of react-native, so I used the @jonny/react-native-mock.
I also installed then uninstalled react-addons-test-utils as it is now deprecated.

In my setupTests file which runs before the tests, I do:

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import '@jonny/react-native-mock/mock'

configure({ adapter: new Adapter() })

Expected behavior

Would love to have that react native component mounted =)

Full example

Component:

import React, { Component } from 'react'
import {
  Text,
  View
} from 'react-native'

export default class TestTest extends Component {
  render() {
    return (
      <View>
        <Text>some text</Text>
      </View>
    )
  }
}

and tests:

  it('test mount using Enzyme', () => {
    const wrapper = mount(
      <TestTest />
    )
  });

  it('test shallow using Enzyme', () => {
    const wrapper = shallow(
      <TestTest />
    )

    expect(wrapper.find('Text')).toHaveLength(1);
  });

The mount returns: It looks like you called mount() without a global document being loaded.
The shallow works fine.

Your environment

"react": "16.2.0"
"react-native": "0.52.0"

"@jonny/react-native-mock": "^0.4.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "22.1.4",
"react-dom": "^16.2.0",
"react-test-renderer": "16.2.0"

API

• [ ] shallow
• [x] mount
• [ ] render

Version

| library | version
| ---------------- | -------
| Enzyme | ^3.3.0
| React | 16.2.0
| react-native | 0.52.0
| jonny/react-native-mock | ^0.4.1
| jest | 22.1.4
| enzyme-adapter-react-16 | 1.1.1
| react-dom | ^16.2.0
| react-test-renderer | 16.2.0

Adapter

• [x] enzyme-adapter-react-16

[ljharb]

You shouldn't be using react-test-renderer at all; i believe there's a package that lets you use .debug() from enzyme for snapshots.

Separately, until #1436 is finished, React Native will have a lot of quirks with enzyme.

[flavio-dev]

actually according to https://medium.com/react-native-training/learning-to-test-react-native-with-jest-part-1-f782c4e30101 it's possible to use jest-serializer-enzyme it seems. But things is like you said: it's not working perfectly right now. But I can't be the only one not being able to mount() using Jest/Enzyme no? Any temp solutions?

[ljharb]

You'd need a react native adapter to use enzyme with React Native.

Closing this in favor of #1436.

[quantuminformation]

I only get this error when trying to debug with webstorm