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)
  });

  1. You can reference the specific prop you would like to test:

    expect( shallow(<Block title="Something" />).prop('title') ).to.equal( "Something" );

  2. 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" );
  });