Testing using enyzme shallow and react-intl with react native

Question

I've been trying to simulate onPress using enzyme shallow render. However I'm unable to access TouchableOpacity due to react-intl

I've seen the helper functions for injecting intl into react components, but those seem to only work with React and not react-native.

it("should handle button presses", () => {
  const onPress = sinon.spy();
  const button = shallow(
    <IntlProvider locale='en'>
      <ButtonApprove
        tintColor={STYLES.COLOR.BRAND_SUCCESS}
        buttonStyle={{}}
        containerStyle={{}}
        handlePress={onPress}
      /> 
    </IntlProvider>
  );
  // console.log(button.instance());
  button.find(TouchableOpacity).simulate('press');
  expect(onPress.calledOnce).toEqual(true);
});

Would JSdom be the way to go about this?

I've solved my question. This article really helped me. https://stackoverflow.com/questions/41649728/how-can-i-test-react-native-component-with-mocha-enzyme-chai-when-its-wrapp?rq=1 — Henry, May 30 '17 at 02:22

score 0 · Answer 1 · answered May 30 '17 at 03:12

This approach helped me to avoid wrapping my component with IntlProvider.

How can I test react-native component with mocha + enzyme + chai when it's wrapped in a Provider component

I was able to traverse to the desired component using .dive() & .instance()

Hope this helps other people dealing with the same issue.

Testing using enyzme shallow and react-intl with react native

1 Answers1