aleks-zah / enzyme-react-intl

A complimentary wrapper function for use with Enzyme, when testing React components that rely on react-intl

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. This package enables you to test your React components using the same react-intl language files that your application would ordinarily use in production. This improves the reliability of your React component tests.

Installation

To install this package in your project run the following:

npm i enzyme-react-intl --save-dev

Peer npm package dependencies

The following npm packages must also be installed as development dependencies in order to use enzyme-react-intl:

npm i react --save-dev
npm i react-dom --save-dev
npm i enzyme --save-dev

Example of usage (testing a React component)

As you can see below, you can test components as per normal. Where you would normally use mount and shallow methods from Enzyme, you simply substitute these with mountWithIntl and shallowWithIntl respectively.

import React from 'react';
import { mountWithIntl, shallowWithIntl, loadTranslation } from 'enzyme-react-intl';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';

import MyComponent from '../components/MyComponent.jsx';

chai.use(chaiEnzyme());

// Load in the desired react-intl translation file.
loadTranslation("./src/client/i18n/en-GB.i18n.json");

describe('<MyComponent />', () => {
    it('renders a name input field', () => {
        const wrapper = mountWithIntl(<MyComponent />);
        expect(wrapper.find('[name="name"]')).to.have.length(1);
    });
});

Note: loadTranslation requires a path from the project root.

Example using a translations object

This is helpful for custom module resolvers in Jest and aliases with Webpack.

import React from 'react';
import { mountWithIntl, shallowWithIntl, loadTranslationObject } from 'enzyme-react-intl';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';

import MyComponent from '../components/MyComponent.jsx';
import translations from "../translations/en-GB.il8n.json"

chai.use(chaiEnzyme());

// Load in the desired react-intl translation file.
loadTranslationObject(translations);

describe('<MyComponent />', () => {
    it('renders a name input field', () => {
        const wrapper = mountWithIntl(<MyComponent />);
        expect(wrapper.find('[name="name"]')).to.have.length(1);
    });
});