When using Enzyme and React-Intl you are likely run into the issues when testing components that use some of React-Intl's components or injected formatting functions. These helper functions (mountWithIntl
and shallowWithIntl
) aim to address some of the below errors:
Uncaught Invariant Violation: [React Intl] Could not find required ``intl`` object. <IntlProvider> needs to exist in the component ancestry.
TypeError: Cannot read property 'getInstance' of null
Error: ReactWrapper::state() can only be called on the root
Checkout this question at StackOverflow for a complete overview of the issues I ran into:
Injecting react-intl object into mounted Enzyme components for testing
Here's what I'm using in case it is helpful to anyone else:
Now I can use mountWithIntl and shallowWithIntl without having to have double exports in my files (one for the wrapped version, one for the unwrapped).
I can simply do:
Basically, when a node gets passed in to mountWithIntl, I get the wrapped component and create a new node using that unwrapped component. Then the helper injects intl into props.
My specs can all pretty much stay the same now. The only changes in my specs are:
1 - Change references to mount and shallow to mountWithIntl and shallowWithIntl for components wrapped by injectIntl.
2 - When spying on functions on the prototype, use:
instead of
Hope this helps someone!