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)
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 NativeI can not find an element while
mount(<SomeComponent />)
in react-native.if I do:
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 callingdone
?