Testando com Jest: Dica #15

Field-test.jsx

import renderer from 'react-test-renderer'
import Field from '../Field'

// esse módulo no import é criado pelo seu mock global, apenas para ajudar nos testes
// e não existe no módulo real do react-intl
import { intl } from 'react-intl'

it('should render correctly', () => {
  const component = renderer.create(<Field intl={intl} />)
  expect(component.toJSON()).toMatchSnapshot()
})

Field.jsx

import { Component } from 'react'
import {
  FormattedMessage,
  intlShape,
  injectIntl,
  defineMessages
} from 'react-intl'

const messages = defineMessages({
  label: {
    id: 'email.label',
    defaultMessage: 'Email'
  },
  placeholder: {
    id: 'email.placeholder',
    defaultMessage: 'Please enter your email address'
  }
})

class Field extends Component {
  static propTypes = {
    intl: intlShape.isRequired
  }

  render() {
    return (
      <div>
        <label>
          <FormattedMessage {...messages.label} />
          <input
            type="email"
            placeholder={this.props.intl.formatMessage(messages.placeholder)}
          />
        </label>
      </div>
    )
  }
}

// injectIntl é necessário para adicionar a prop `intl` e podermos renderizar apenas strings
// no atributo `placeholder`.
// No React v16 com Fiber, componentes como `FormattedMessage` terão a possibilidade de
// retornar apenas string, ao invés de sempre envolver a string em um element DOM como <span>,
// que é o comportamento atual.
// Com isso, esperamos que a API imperativa do `formatMessage` possa ser substituída
// em um futuro próximo.
export default injectIntl(Field)

react-intl.jsx

// coloque esse arquivo em: <rootDir>/__mocks__/react-intl.js
// isso irá aplicar esse mock globalmente, quando necessário

const Intl = require.requireActual('react-intl')

// Inicializando um `IntlProvider` real, para evitarmos
// a necessidade de re-implementar métodos internos
const defaultProps = {
  locale: 'en',
  defaultLocale: 'en'
}
const intlProvider = new Intl.IntlProvider(defaultProps, {})

// O mesmo objeto `intl` que nosso código real recebe :D
const { intl } = intlProvider.getChildContext()
Intl.injectIntl = Node => props => <Node {...props} intl={intl} />

// Substituindo os componentes e implementando os componentes reais
// e fornecendo o contexto necessário que eles precisam para funcionar
const {
  IntlProvider,
  FormattedDate,
  FormattedTime,
  FormattedRelative,
  FormattedNumber,
  FormattedPlural,
  FormattedMessage,
  FormattedHTMLMessage
} = Intl
Intl.FormattedDate = props =>
  <IntlProvider {...defaultProps}><FormattedDate {...props} /></IntlProvider>
Intl.FormattedTime = props =>
  <IntlProvider {...defaultProps}><FormattedTime {...props} /></IntlProvider>
Intl.FormattedRelative = props =>
  <IntlProvider {...defaultProps}>
    <FormattedRelative {...props} />
  </IntlProvider>
Intl.FormattedNumber = props =>
  <IntlProvider {...defaultProps}><FormattedNumber {...props} /></IntlProvider>
Intl.FormattedPlural = props =>
  <IntlProvider {...defaultProps}><FormattedPlural {...props} /></IntlProvider>
Intl.FormattedMessage = props =>
  <IntlProvider {...defaultProps}><FormattedMessage {...props} /></IntlProvider>
Intl.FormattedHTMLMessage = props =>
  <IntlProvider {...defaultProps}>
    <FormattedHTMLMessage {...props} />
  </IntlProvider>

// Adicionando `displayName` para que nossos snapshots no mostrem "Unknow" como nome do componente
Intl.FormattedDate.displayName = 'FormattedDate'
Intl.FormattedTime.displayName = 'FormattedTime'
Intl.FormattedRelative.displayName = 'FormattedRelative'
Intl.FormattedNumber.displayName = 'FormattedNumber'
Intl.FormattedPlural.displayName = 'FormattedPlural'
Intl.FormattedMessage.displayName = 'FormattedMessage'
Intl.FormattedHTMLMessage.displayName = 'FormattedHTMLMessage'

// Especialmente para testes, o módulo real não exporta isso
Intl.intl = intl

module.exports = Intl