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.

Answer 1

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!