Jest tests failing without module mock

[airbnb]

Jest tests failing without module mock

[yzimet]

A bit more explanation:

A component that is wrapped with withDirection will use direction context from the closest DirectionProvider. If DirectionProvider is not present anywhere in the tree, the withDirection HOC will use a LTR direction context by default. So technically DirectionProvider is not required.

In your tests, if you are testing something unrelated to direction you can choose to not provide a DirectionProvider. For example:

const wrapper = shallow(
  <ForwardsLabel
    onPress={onPress}
  />
).dive();

expect(wrapper.prop('foo')).to.equal('bar');

In this example I'm using Enzyme's dive method to dive through the withDirection HOC.

[ljharb]

I'm confused, what do you mean "the fact that the tests don't have them"?

[ljharb]

If you're using withDirection, then DirectionProvider is required - so your tests also need to have them, otherwise they're not correct tests.

[dac09]

I'll give you an example of the tests that fail:

  it('Should remember state if its passed in', () => {
    const wrapper = mount(
      <MyComponent
        onSubmit={mockSubmit}
      />
    );

    expect(wrapper.state('answer')).toBe('option2');
  });

I understand that the Provider is required, but is the expectation in unit tests to write:

<DirectionProvider>
<ComponentToTest/>
</DirectionProvider>

?

Perhaps a utility function to provide context for tests would be helpful, e.g. for react-intl, a modified mount function can be used to provide context

function nodeWithIntlProp(node: ReactElement) {
  return React.cloneElement(node, { intl });
}

export function mountWithIntl(node: ReactElement) {
  return mount(nodeWithIntlProp(node), {
    context: { intl },
    childContextTypes: { intl: intlShape }
  });
}

[ljharb]

Yes, that's the requirement in unit tests, to include the DirectionProvider explicitly.

[dac09]

Ok, great. Thanks 👍

[dac09]

Thanks @yzimet. That's very useful!