@cerner/terra-enzyme-intl

Terra Enzyme Intl

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 @cerner/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 an IntlProvider wrapping component, providing the intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documentation
• 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 />).dive();

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

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

mountWithIntl

The mountWithIntl method is a decorated version of enzyme's mount that injects an IntlProvider wrapping component, providing the intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documentation
• 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"
  />
  <Button
    text="TerraEnzymeIntl.buttonText"
  />
</div>

renderWithIntl

The renderWithIntl method is a decorated version of enzyme's render that injects an IntlProvider wrapping component, providing the intl context for either <Formatted* /> components or format*() methods through injectIntl().

See:

• react-intl documentation

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>
  TerraEnzymeIntl.helloWorld
  <button
    type="button"
  >
    TerraEnzymeIntl.buttonText
  </button>
</div>

mockIntl

If you have a method that depends on the react-intl intl object, 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

Node version support

This package was developed and tested using Node 10 up to Node 14. Consumers using Node 16 or greater are advised to use it at their own risk since those versions are not officially supported due to lack of thorough testing.

LICENSE

Copyright 2018 - 2020 Cerner Innovation, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.