enzyme-intl

Enzyme helpers for fortifying tests that depend on react-intl by decoupling the need for actual translations. See: react-intl documentation

Installation

npm:

npm install -D enzyme-intl

or

Yarn:

yarn add -D enzyme-intl

Usage

import { shallowWithIntl, mountWithIntl } from 'enzyme-intl';

const shallowWrapper = shallowWithIntl(<CustomComponent />);
const mountWrapper = mountWithIntl(<CustomComponent />);

expect(shallowWrapper).toMatchSnapshot(); // OK, doesn't depend on real translations
expect(mountWrapper).toMatchSnapshot(); // OK, doesn't depend on real translations

Mock Intl

For testing methods that depend on react-intl intlShape:

import { mockIntl } from 'enzyme-intl';
import foo from '../foo';

const result = foo(mockIntl);
expect(result).toMatchSnapshot(); // OK, doesn't depend on real translations

Jest Mock

In order to mock out calls to the react-intl api in Jest, you can copy the following into your root __mocks__ folder.

// root-app-folder/__mocks__/react-intl.js
/**
 * See: https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#jest-mock
 */
import React from 'react';

const mockIntl = {
  defaultLocale: 'en',
  formatDate: (date, options) => `${date}`,
  formatHTMLMessage: ({ id }, options) => id,
  formatMessage: () => ({ id }, options) => id,
  formatNumber: (value, options) => `${value}`,
  formatPlural: (value, options) => `${value}`,
  formatTime: (value, options) => `${value}`,
  formatRelative: (value, options) => `${value}`,
  now: () => 0,
};

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

Intl.injectIntl = (Node) => {
  const renderWrapped = props => <Node {...props} intl={mockIntl} />;
  renderWrapped.displayName = Node.displayName || Node.name || 'Component';
  return renderWrapped;
};

module.exports = Intl;

See: react-intl jest-mock documentation