mount() doesn't seem to work with React Native
See original GitHub issueUsing 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:
- Created 8 years ago
- Comments:18 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We made a fork of
react-native-mock
calledreact-native-mock-render
that will render React Elements for Native components, which makesmount()
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
, callmount()
using enzyme 2.7.1 and jest on React Native