Error when mounting React Native component

[srdjan-kolosek]

I am using Jest. Shallow works fine. When i try to mount a component i get this error:

 Test suite failed to run

ReferenceError: document is not defined

  at Object.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:78:24)
  at renderWithOptions (node_modules/enzyme/build/react-compat.js:182:26)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
  at mount (node_modules/enzyme/build/mount.js:19:10)
  at Object.<anonymous> (app/components/profile/strengths/__tests__/RecommendationsList- test.react.js:9:36)

This is the test (RecommendationsList is basic component with just 1 View):

 'use strict';
 import React, { Component } from 'react';
 import { View, Text, TouchableOpacity, TextInput, Alert, ListView } from 'react-native';

 import { shallow, mount } from 'enzyme';

  import RecommendationsList  from '../RecommendationsList.react';

 var output  = mount(<RecommendationsList />);
/* Rendering */
  describe('Test', () => {
  it('should test', () => {

  });

   });

Part of package.json:

   "jest": {
"preset": "jest-react-native"
},
"dependencies": {
  "buffer": "^4.7.1",
 "cheerio": "^0.20.0",
 "country-codes": "0.0.3",
"enzyme": "^2.3.0",
 "events": "^1.1.0",
"lodash": "^4.14.0",
"moment": "^2.14.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-native": "^0.34.0",
"react-native-autogrow-textinput": "^2.1.0",
"react-native-babel-jest": "^0.1.0",
"react-native-button": "^1.6.0",
"react-native-dismiss-keyboard": "^1.0.0",
"react-native-image-picker": "^0.22.8",
"react-native-keyboard-aware-scroll-view": "0.0.7",
"react-native-localization": "^0.1.18",
"react-native-material-design": "^0.3.5",
"react-native-orientation": "git+https://github.com/yamill/react-native-orientation",
"react-native-picker-android": "^1.0.3",
"react-native-router-flux": "^3.35.0",
"react-native-slider": "^0.7.1",
"react-native-swiper": "^1.4.6",
"react-native-video": "^0.9.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sinon": "^1.17.4",
"stream": "0.0.2",
"undefined": "^0.1.0"
 },
  "devDependencies": {
"babel-core": "^6.8.0",
"babel-jest": "^15.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react-native": "^1.9.0",
"enzyme": "^2.4.1",
"expect": "^1.20.1",
"fetch-mock": "^4.5.4",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"jest-react-native": "^15.0.0",
"react-addons-test-utils": "^15.3.2",
"react-shallow-testutils": "^2.0.0",
"react-test-renderer": "^15.3.2",
"redux-mock-store": "^1.0.2"
 }
}

[ljharb]

mount requires a document be available - either because it's in a browser, or via jsdom.

[srdjan-kolosek]

It was working with jest 12 tho. What was I doing wrong?

[cpojer]

You can try "testEnvironment": "jsdom" but I don't recommend using enzyme for react-native components at this point because react-native components are rendered differently and not using the DOM. The react-test-renderer is supposed to receive a find API soon.

[ancyrweb]

The reason i've choosen Enzyme with Jest is because i can access the instance and the inner functions of my components. This is not possible with react-test-renderer.

[cpojer]

Yeah, we need to implement the find API for the test renderer; it's one of the most requested features :)

[ancyrweb]

Are you planning to implement getInstance as well ?

[khirakawa]

The reason i've choosen Enzyme with Jest is because i can access the instance and the inner functions of my components. This is not possible with react-test-renderer.

@Rewieer Could you explain why this isn't possible with react-test-renderer? Wouldn't the getInstance method help here?

[ancyrweb]

@khirakawa it's been quite a long time since then, but it seems at the time react-test-renderer hadn't a getInstance method.

[justuseapen]

I've tried to do the "testEnvironment": "jsdom" in package.json (no change) in my jestConfig.json file (lots of unknown prop errors. Maybe progress?).

Has anyone figured out a way to use Enzyme's mounting for testing events with React Native and Jest?

[ThaJay]

shallow(<MyComponent store={store} />).dive().instance()

works for redux @connected components. Leave out the dive() if the component does not have a connect decorator. This way you can test component functions and use react-test-renderer for a deep snapshot test.

getInstance() on react-test-renderer would indeed be nice.

[ljharb]

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

Closing this in favor of #1436.