Neurologically Paralyzing Mouseovers

    @cerner/terra-enzyme-intl

    4.6.1 • Public • Published

    Terra Enzyme Intl

    NPM version Build Status Dependencies status devDependencies status

    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:

    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:

    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:

    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.

    Install

    npm i @cerner/terra-enzyme-intl

    DownloadsWeekly Downloads

    58

    Version

    4.6.1

    License

    Apache-2.0

    Unpacked Size

    27.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • benbcai
    • cerner-oss
    • kpshek
    • sambao21
    • kol