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

2.7k Views Asked by At

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

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

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?

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:

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

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

0

There are 0 best solutions below