enzyme: mount() doesn't seem to work with React Native

Using enzyme 2.0.0, react-native-mock 0.0.6 and react-native 0.19.0

I have the following component:

import React, {
  StyleSheet,
  PropTypes,
  View,
  Text,
} from 'react-native';

export default class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {text: 'INIT'}
  }

  componentDidMount() {
    this.setState({text: 'I wonder if there will be any problems...'})  
  };

  render() {
    return (
      <View>
        <Text>{this.state.text}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
});

This is my spec (Mocha):

/* global React, shallow, mount, _, expect */

const {Text} = React;
import MyComponent from './MyComponent';

describe('<MyComponent />', () => {

  it('should render stuff', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug());
    expect(wrapper.length).to.equal(1);
    expect(wrapper.contains(<Text>INIT</Text>)).to.equal(true);
  });

  it('componentDidMount updates text', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.instance().componentDidMount();
    wrapper.update();
    console.log(wrapper.debug());
    expect(wrapper.contains(<Text>I wonder if there will be any problems...</Text>)).to.equal(true);
  });

  it('componentDidMount is called automatically when you call mount', () => {
    const wrapper = mount(<MyComponent />);
    console.log(wrapper.debug());
    expect(wrapper.contains(<Text>I wonder if there will be any problems...</Text>)).to.equal(true);
  });

});

The first two tests run without a problem. For the third one I expected the mount call to execute componentDidMount of MyComponent right away.

Unfortunately it doesn’t, debug() outputs the initial render output with “INIT”. Is mount() not supported (yet) for React Native? Is the problem probably with the react native mock? Or do I something wrong here?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (4 by maintainers)

Most upvoted comments

We made a fork of react-native-mock called react-native-mock-render that will render React Elements for Native components, which makes mount() work with jsdom. We wrote about it at https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/

Will show error TypeError: document.createElement is not a function, call mount() using enzyme 2.7.1 and jest on React Native

I can not find an element while mount(<SomeComponent />) in react-native.

if I do:

const wrapper = mount(<SomeComponent />)
wrapper.find('TouchableOpacity').length

I get 0. This works when I shallow render (i.e. I get 1). I am using react-native-mock/mock.js to mock the react-native components.

@ishanray and if you make the test async, and print that out in a setTimeout, before calling done?