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

Getting Started

Install with npmjs:

• npm install --save-dev terra-enzyme-intl
• yarn add --dev terra-enzyme-intl

Usage

This package adds the following helpers for testing React components with Jest and Enzyme that use the react-intl APIs. Your mount()ed and shallow()ed components need access to the intl context to render properly.

In you Jest config, add the following config

 moduleNameMapper: {
    intlLoaders: 'terra-enzyme-intl',
    translationsLoaders: 'terra-enzyme-intl',
 },

shallowWithIntl

The shallowWithIntl method is a decorated version of enzyme's shallow that injects a mock version of the react-intl intl object into your component as well as set up the required intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documenation
• enzyme shallow options

shallowWithIntl Example

import React from 'react';
import { injectIntl } from 'react-intl';
import { shallowWithIntl } from 'terra-enzyme-intl';

const CustomComponent = injectIntl(({
  intl,
  ...otherProps,
}) => (
  <div>
    <FormattedMessage id="TerraEnzymeIntl.helloWorld" />
    <Button text={intl.formatMessage({ id: 'TerraEnzymeIntl.buttonText' })} />
  </div>
));

const shallowWrapper = shallowWithIntl(<CustomComponent />);

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

/* EXAMPLE SNAPSHOT BELOW */
<div>
  <FormattedMessage
    id="TerraEnzymeIntl.helloWorld"
    values={Object {}}
  />
  <Button
    text="TerraEnzymeIntl.buttonText"
  />
</div>

mountWithIntl

The mountWithIntl method is a decorated version of enzyme's mount that injects a mock version of the react-intl intl object into your component as well as set up the required intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documenation
• enzyme mount options

mountWithIntl Example

import React from 'react';
import { injectIntl } from 'react-intl';
import { mountWithIntl } from 'terra-enzyme-intl';

const CustomComponent = injectIntl(({
  intl,
  ...otherProps,
}) => (
  <div>
    <FormattedMessage id="TerraEnzymeIntl.helloWorld" />
    <Button text={intl.formatMessage({ id: 'TerraEnzymeIntl.buttonText' })} />
  </div>
));

const mountWrapper = mountWithIntl(<CustomComponent />);

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

/* EXAMPLE SNAPSHOT BELOW */
<div>
  <FormattedMessage
    id="TerraEnzymeIntl.helloWorld"
    values={Object {}}
  />
  <Button
    text="TerraEnzymeIntl.buttonText"
  />
</div>

renderWithIntl

The renderWithIntl method is a decorated version of enzyme's render that injects a mock version of the react-intl intl object into your component as well as set up the required intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documenation

renderWithIntl Example

import React from 'react';
import { injectIntl } from 'react-intl';
import { renderWithIntl } from 'terra-enzyme-intl';

const CustomComponent = injectIntl(({
  intl,
  ...otherProps,
}) => (
  <div>
    <FormattedMessage id="TerraEnzymeIntl.helloWorld" />
    <Button text={intl.formatMessage({ id: 'TerraEnzymeIntl.buttonText' })} />
  </div>
));

const renderWrapper = renderWithIntl(<CustomComponent />);

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

/* EXAMPLE SNAPSHOT BELOW */
<div>
  <span>
    TerraEnzymeIntl.helloWorld
  </span>
  <button
    type="button"
  >
    TerraEnzymeIntl.buttonText
  </button>
</div>

shallowContext

If you would wrather use enzyme's shallow, you can pass the shallowContext as the second argument to shallow.

shallowContext Example

import React from 'react';
import { shallow } from 'enzyme';
import { injectIntl } from 'react-intl';
import { shallowContext } from 'terra-enzyme-intl';

const CustomComponent = injectIntl(({
  intl,
  ...otherProps,
}) => (
  <div>
    <FormattedMessage id="TerraEnzymeIntl.helloWorld" />
    <Button text={intl.formatMessage({ id: 'TerraEnzymeIntl.buttonText' })} />
  </div>
));

const shallowWrapper = shallow(<CustomComponent />, shallowContext);

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

/* EXAMPLE SNAPSHOT BELOW */
<div>
  <FormattedMessage
    id="TerraEnzymeIntl.helloWorld"
    values={Object {}}
  />
  <Button
    text="TerraEnzymeIntl.buttonText"
  />
</div>

mountContext

If you would wrather use enzyme's mount, you can pass the mountContext as the second argument to mount.

mountContext Example

import React from 'react';
import { mount } from 'enzyme';
import { injectIntl } from 'react-intl';
import { mountContext } from 'terra-enzyme-intl';

const CustomComponent = injectIntl(({
  intl,
  ...otherProps,
}) => (
  <div>
    <FormattedMessage id="TerraEnzymeIntl.helloWorld" />
    <Button text={intl.formatMessage({ id: 'TerraEnzymeIntl.buttonText' })} />
  </div>
));

const mountWrapper = mount(<CustomComponent />, mountContext);

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

/* EXAMPLE SNAPSHOT BELOW */
<div>
  <FormattedMessage
    id="TerraEnzymeIntl.helloWorld"
    values={Object {}}
  />
  <Button
    text="TerraEnzymeIntl.buttonText"
  />
</div>

mockIntl

If you have a method that depends on the react-intl intlShape API, you can pass it the mockIntl object.

import { mockIntl } from 'terra-enzyme-intl';

const foo = (id, intl) => {
  if (id) {
    return intl.formatMessage({ id });
  }

  return intl.formatMessage({ id: 'TerraEnzymeIntl.missingId' });
};

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