question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

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

github_iconTop GitHub Comments

12reactions
dan-mangescommented, Mar 21, 2017

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/

12reactions
yutin1987commented, Jan 30, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native ComponentDidMount not loading - Stack Overflow
Recently I tried adding a search function to my code, and after I implemented the features the function seemed to be not working....
Read more >
ReactDOM – React
If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if...
Read more >
Optimizing Flatlist Configuration - React Native
Window: The area in which items should be mounted, which is generally much larger than the viewport. Props​. Here are a list of...
Read more >
Troubleshooting | React Navigation
Troubleshooting. This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation.
Read more >
[Solved]-SetState doesn't seem to update-React Native
react -native-render-html: "You seem to update the X prop of the Y component in short periods of time..." Why does this component not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found