Enzyme's shallow().text() with React Native doesn't work as I expected
Solution 1: A solution for textContent
From an Enzyme example app:
const title = "Blah";
const wrapper = shallow(<Block title={title} />);
expect(wrapper.length).to.equal(1);
expect(wrapper.contains(<Text>{title}</Text>)).to.equal(true);
Solution 2: More semantic
Ok the more semantic version of Alternative: props().children above is below. This Github discussion also helped.
Block.js
:
import React from 'react';
import {View, Text} from 'react-native';
export default ({title, ui}) => (
<View>
<Text data={title}>{title}</Text>
</View>
);
Block.test.js
:
it('should have correct props', () => {
const title = title;
expect(
shallow(<Block title={title} />)
.find('Text') // Use selector to get certain children
.first() // Get the first child
.props() // Get its props
.data
).to.equal(title)
});
You can reference the specific prop you would like to test:
expect( shallow(<Block title="Something" />).prop('title') ).to.equal( "Something" );
text() is not doing what you are thinking here. Have a look at the second example in the docs, shallow won't render out your
<View>
tag
Another solution (very similar to props().children
) is to access children in prop
it('should have correct props', () => {
expect(
shallow(<Block title="Something" />).prop('children')
).toBe( "Something" );
});