Multi tool use

Clash Royale CLAN TAG

Jest + Enzyme + React Native: How to test content of <Text /> tag?

I want to unit test with Jest and Enzyme if my <Text /> tag correctly receives props.header as text.

<Text />

props.header

Usually I was able to test the content of the <Text /> tag like this:

<Text />

it("should render a label", () => {
expect(wrapper.find(Text).contains("submit")).toBe(true);
});


But as soon as I pass an object this is no longer possible. Let me show you:

const createTestProps = props => ({
header: SOME_CONSTANT,
...props
});

...

let wrapper;
let props;
beforeEach(() => {
props = createTestProps();
wrapper = shallow(<MyList {...props} loaded={false} />);
});

it("should render a header", () => {
expect(wrapper.find(Text).contains(props.header)).toBe(true);
});


This fails with the following error message:

● MyList › rendering › still loading › should render a header

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false


How could I test this using Jest and Enzyme? Any help would be much appreciated!

Edit: I found out that it has something to do passing a constant to the props. If I hardcode the value of props like this:

props

props

const createTestProps = props => ({
header: "Some hardcoded value",
...props
});


The test also passes. Is there a way to make this work even with a constant?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.