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 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:
shallowWithIntl Example
import React from 'react';import injectIntl from 'react-intl';import shallowWithIntl from 'terra-enzyme-intl'; const CustomComponent = ; const shallowWrapper = ; ; // OK, doesn't depend on real translations /* EXAMPLE SNAPSHOT BELOW */<div> <FormattedMessage ="TerraEnzymeIntl.helloWorld" = /> <Button ="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:
mountWithIntl Example
import React from 'react';import injectIntl from 'react-intl';import mountWithIntl from 'terra-enzyme-intl'; const CustomComponent = ; const mountWrapper = ; ; // OK, doesn't depend on real translations /* EXAMPLE SNAPSHOT BELOW */<div> <FormattedMessage ="TerraEnzymeIntl.helloWorld" = /> <Button ="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:
renderWithIntl Example
import React from 'react';import injectIntl from 'react-intl';import renderWithIntl from 'terra-enzyme-intl'; const CustomComponent = ; const renderWrapper = ; ; // OK, doesn't depend on real translations /* EXAMPLE SNAPSHOT BELOW */<div> <span> TerraEnzymeIntlhelloWorld </span> <button ="button" > TerraEnzymeIntlbuttonText </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 = ; const shallowWrapper = ; ; // OK, doesn't depend on real translations /* EXAMPLE SNAPSHOT BELOW */<div> <FormattedMessage ="TerraEnzymeIntl.helloWorld" = /> <Button ="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 = ; const mountWrapper = ; ; // OK, doesn't depend on real translations /* EXAMPLE SNAPSHOT BELOW */<div> <FormattedMessage ="TerraEnzymeIntl.helloWorld" = /> <Button ="TerraEnzymeIntl.buttonText" /></div>
mockIntl
If you have a method that depends on the react-intl intlShape
API, you can pass it the mockIntl
object.
; const foo = { if id return intl; return intl;}; const id = 'Foo.id';const result = ;; // OK, doesn't depend on real translations