React Intl


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

Configuring React-Intl Polyfills / Locales

If you're using React-Intl in your project, and you need to load a locale, You have two options:

  1. When using Node 13 and higher, Intl support is now out of the box. The default ICU (International Components for Unicode) option for Node is full-icu meaning all ICU's.
    All you need to do is embed the set of ICU data you need:

    // test-utils.js
    const hasFullICU = () => {
    // That's the recommended way to test for ICU support according to Node.js docs
    try {
    const january = new Date(9e8)
    const pt = new Intl.DateTimeFormat('pt', { month: 'long' })
    return pt.format(january) === 'janeiro'
    } catch (err) {
    return false
    export const setupTests = () => {
    if (hasFullICU()) {
    Intl.NumberFormat.format = new Intl.NumberFormat('pt').format
    Intl.DateTimeFormat.format = new Intl.DateTimeFormat('pt').format
    } else {
    global.Intl = IntlPolyfill
  2. When using Node with prior versions, the ICU default option is small-icu meaning it includes a subset of ICU data (typically only the English locale).
    If you do need to load a locale you have two options:

    1. Load the Polyfills according to that language:

      // test-utils.js
      import IntlPolyfill from 'intl'
      import 'intl/locale-data/jsonp/pt'
      export const setupTests = () => {
      if (global.Intl) {
      Intl.NumberFormat = IntlPolyfill.NumberFormat
      Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
      } else {
      global.Intl = IntlPolyfill
    2. Load the ICU's at runtime:
      Install the package full-icu and inject it to your test environment, you can do that by setting NODE_ICU_DATA before calling jest: NODE_ICU_DATA=node_modules/full-icu jest. Doing that you will give you full-icu support as shown in option 1.

Creating a custom render function

To test our translated component we can create a custom render function using the wrapper option as explained in the setup page.
Our custom render function can look like this:

// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { IntlProvider } from 'react-intl'
function render(ui, { locale = 'pt', ...renderOptions } = {}) {
function Wrapper({ children }) {
return <IntlProvider locale={locale}>{children}</IntlProvider>
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

A complete example

import React from 'react'
import '@testing-library/jest-dom/extend-expect'
// We're importing from our own created test-utils and not RTL's
import { render, screen, setupTests } from '../test-utils.js'
import { FormattedDate } from 'react-intl'
const FormatDateView = () => {
return (
<div data-testid="date-display">
test('it should render FormattedDate and have a formatted pt date', () => {
render(<FormatDateView />)
Last updated on by Lidor Avitan