Manual mock React-Intl with Jest to have snapshot testing

Question

I have been struggling mocking React-Intl library with Jest because I'm having this error when I run tests:

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

The documentation of this library says that we have to create a folder in root project called __Mocks__ and then add this file:

// ./__mocks__/react-intl.js
import React from 'react';
const Intl = require.requireActual('react-intl');

// Here goes intl context injected into component, feel free to extend
const intl = {
  formatMessage: ({defaultMessage}) => defaultMessage
};

Intl.injectIntl = (Node) => (props) => <Node {...props} intl={intl}/>;

module.exports = Intl;

But nothing happens.

score 21 · Accepted Answer · edited Apr 23 '18 at 14:14

21

After hours looking in it, I found that what I needed to change was the way I was requiring react-intl package. So, I changed that line:

const Intl = require.requireActual('react-intl');

to that:

const Intl = jest.genMockFromModule('react-intl');

So the final file looks like this:

import React from 'react';
const Intl = jest.genMockFromModule('react-intl'); // <-- This is the change

const intl = {
  formatMessage: ({defaultMessage}) => defaultMessage
};

Intl.injectIntl = (Node) => (props) => <Node {...props} intl={intl}/>;

module.exports = Intl;

Hope this helps!

edited Apr 23 '18 at 14:14

George Cummins

28,485
8
71
90

answered May 03 '17 at 13:08

Albert Olivé Corbella

4,061
7
48
66

You have to use ```const Intl = jest.genMockFromModule('react-intl');``` – Albert Olivé Corbella Apr 23 '18 at 13:58
How do you get Jsx elements to work with the module.js file? Jest is failing to run the tests because of unknown character '<' – Omar Sourour Aug 30 '19 at 07:07

Manual mock React-Intl with Jest to have snapshot testing

1 Answers1