Testing react-intl components with enzyme

Question

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?

score 4 · Accepted Answer · edited May 23 '17 at 12:25

4

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().

edited May 23 '17 at 12:25

Community

1
1

answered May 03 '16 at 15:05

Mirage

992
1
7
26

Does anyone have those helpers like `shallowWithIntl` or `mountWithIntl` in TypeScript? – jake-ferguson May 23 '19 at 11:24

score 2 · Answer 2 · answered May 03 '16 at 08:37

2

I got it working by using

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

instead.

answered May 03 '16 at 08:37

Martin B

21
1

That is a good approach for `shallow` instantiations. Note this won't work when using Enzyme's `mount` method. – Mirage May 23 '16 at 07:07

score 0 · Answer 3 · answered Dec 06 '19 at 11:42

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()

Testing react-intl components with enzyme

3 Answers3