Enzyme: mount() fails to render the whole tree on ReactNative

[manuelmorales]

I'm trying to render an entire tree with mount(), but only the first level gets rendered. This happens on React Native using react-native-mocks. I made a small repo just to reproduce the issue: https://github.com/manuelmorales/enzyme-mount-problem/. But here is the gist of it:

import React, { View, Text, StyleSheet } from 'react-native';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';

var jsdom = require('jsdom').jsdom;
global.document = jsdom('');
global.window = document.defaultView;

const Inside = React.createClass({
  render() {
    return (
      <View>
        <Text>Some text</Text>
      </View>
    )
  }
});

const Outside = React.createClass({
  render() {
    return (
      <View>
        <Inside />
      </View>
    )
  }
});

describe('mount()', () => {
  it('it should render Inner', () => {
    const wrapper = mount(<Outside />);
    expect(wrapper.find(Text).length).to.eq(1);
  });
});

wrapper.find(Text).length is returning me zero entries, when it should find one. And wrapper.debug() returns the following:

<Outside>
  <View />
</Outside>

While I expected:

<Outside>
  <View>
    <Text>Some Text</Text>
  </View>
</Outside>

Are my expectations correct? Is this a bug?

[aweary]

@lelandrichardson would be the best person to address this since he created react-native-mocks, but looking at the source of the <View /> component: react-native-mock/blob/master/src/components/View.js

  render() {
    return null;
  },

It just renders null, so it wont render any children you pass to it. Thats why you're just seeing <View /> instead of <View> <Text> Some Text </Text> </View>

[manuelmorales]

Right, that explains everything. It looks to me that react-native-mocks was not design for this. I'll have to think of a different approach. Thanks a lot @lelandrichardson.

[dan-manges]

We made a fork named react-native-mock-render that will allow fully rendering native components with mount(). We wrote about it at https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/

[JulioOrellana]

We made a fork named react-native-mock-render that will allow fully rendering native components with mount(). We wrote about it at https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/

just what I was looking for 👍