Edit

React Intl

Note

If you want to combine setupTests with another setup you should check setup

Configuring React-Intl Polyfills

If you're using React-Intl in your project, and you need to load a locale, you must load the Polyfills according to that language.

In order to do so, you may use this small setup and/or combine it with other setups.

// src/setupTests.js
import IntlPolyfill from 'intl'
import 'intl/locale-data/jsonp/pt'

const setupTests = () => {
 // https://formatjs.io/guides/runtime-environments/#server
 if (global.Intl) {
   Intl.NumberFormat = IntlPolyfill.NumberFormat
   Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
 } else {
   global.Intl = IntlPolyfill
 }
}

setupTests();

A complete example:

import React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, getByTestId } from '@testing-library/react'
import { IntlProvider, FormattedDate } from 'react-intl'
import IntlPolyfill from 'intl'
import 'intl/locale-data/jsonp/pt'

const setupTests = () => {
  // https://formatjs.io/guides/runtime-environments/#server
  if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
  } else {
    global.Intl = IntlPolyfill
  }
}

const FormatDateView = () => {
  return (
    <div data-testid="date-display">
      <FormattedDate
        value="2019-03-11"
        timeZone="utc"
        day="2-digit"
        month="2-digit"
        year="numeric"
      />
    </div>
  )
}

const renderWithReactIntl = component => {
  return render(<IntlProvider locale="pt">{component}</IntlProvider>)
}

setupTests()

test('it should render FormattedDate and have a formatted pt date', () => {
  const { container } = renderWithReactIntl(<FormatDateView />)
  expect(getByTestId(container, 'date-display')).toHaveTextContent('11/03/2019')
})