Testing react-intl components with enzyme

react-intl testing
enzyme-react-intl github
enzyme-react-intl npm
react-intl react-testing-library
enzyme shallow
react-intl formatmessage
formattedmessage test
enzyme-react-intl typescript

I have looked into react-intl for suggestions but it doesn't leave any explicit documentation for enzyme.

This is how I have been trying to write my tests.

import {IntlProvider} from 'react-intl';

const intlProvider = new IntlProvider({locale: 'en'}, {});
const intl = intlProvider.getChildContext();
const customMessage = shallow(<CustomMessage />, { options: { context: intl } });

But I keep getting the error

Invariant Violation: [React Intl] Could not find required intl object. needs to exist in the component ancestry.

I looked into their repo and they seems to have made it work with 'react-addons-test-utils'.

Am I doing something wrong?

I've posted an answer to a similar question:

Injecting react-intl object into mounted Enzyme components for testing

You would be able to import { shallowWithIntl } from 'intl-helper' and then use shallowWithIntl() instead of Enzyme's shallow().

Testing React Intl components with Jest and Enzyme, Testing React Intl components with Jest and Enzyme. There are two problems with testing components that use React Intl with Enzyme and Jest: injectIntl higher-order component will break shallow rendering because it will render a wrapper component instead of your component. enzyme-react-intl. Enables you to test React components, using Enzyme, where those components rely on react-intl.If you were to test a component that used react-intl, using Enzyme's mount and shallow methods, then your tests would throw errors.

I got it working by using

const customMessage = shallow(<CustomMessage />, { context: intl });

instead.

Testing react-intl with jest and enzyme | by Gilad lev-ari, It is pretty straightforward to use as part of your react project. Yet it seems to be, that testing a component wrapped with the 'injectIntl' high order� The problem is that we are mounting single components (with Enzyme's mount()) without their <IntlProvider /> parent wrapper. This is solved by wrapping the provider around but then the root points to the IntlProvider instance and not to CustomComponent. The Testing with React-Intl: Enzyme docs are still empty. <CustomComponent />

Thats how I achieve the things:

import React from 'react';
import StandardFilterIntl, {StandardFilter} from 'bundles/components/Filter/StandardFilter';
import {mountWithIntl} from 'enzyme-react-intl';

const FilterComponent = mountWithIntl(<StandardFilterIntl {...standardFilterProps} />);
FilterComponent.find(StandardFilter).state()

enzyme-react-intl, A complimentary wrapper function for use with Enzyme, when testing React components that rely on react-intl. Testing React-Intl components with Enzyme&#39;s mount() and shallow() methods. This is a helper function which wraps the `intl` context around your component tests in an easy and efficient way. - C

Testing with formatjs, React Intl uses the built-in Intl APIs in JavaScript. If a component you're trying to test using ReactShallowRenderer uses React Intl — specifically Create a file with the above helper in e.g. helpers/intl-enzyme-test-helper.js and import the� answer 1 >>---Accepted---Accepted---Accepted---. I've posted an answer to a similar question: Injecting react-intl object into mounted Enzyme components for testing. You would be able to import { shallowWithIntl } from 'intl-helper' and then use shallowWithIntl() instead of Enzyme's shallow().

Testing react-intl components with enzyme, I've posted an answer to a similar question: Injecting react-intl object into mounted Enzyme components for testing. You would be able to import� Testing React components with Jest and Enzyme August 2019: This article is out of date, check my new article about testing React components with Jest and Enzyme . October 2017: the article was updated to React 16 and Enzyme 3.

Write tests for react-intl output using enzyme and Jest from @ on , What this helper will do is wrap the component being tested with all of the correct parent components, contexts, and props required by react-intl. It also gives us the � Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output. Install Jest In your Terminal cd to the root of the React / Redux application you want to test.

Comments
  • Does anyone have those helpers like shallowWithIntl or mountWithIntl in TypeScript?
  • That is a good approach for shallow instantiations. Note this won't work when using Enzyme's mount method.