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
@mirague I'm running into one final snag: looking up the translations within
en.json
within the tests.Sample
<ActivityPage />
Component:en.json:
Enzyme:
Error:
It's unable to do the translation lookup, so it resorts to the default message. For your helpers to work, does this require the use of
injectIntl
in the actual component to be able to look up translations withinen.json
? I am currently wrapping my overall app component within an<IntlProvider>
to achieve translation look-ups within the browser. Wondering if I'm missing something with injection. How is your app component configured?App setup (React Router):