README
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:
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.