Docs: Add example of React-Intl integration

[viniciusavieira]

Example of React-Intl integration

React-testing-library is really awesome .

I've been working with react-intl and react-testing-library and the setup is really simple.
Althougt I've been stuck during some time to understand how both libs play together adding support to locale languages, that is a react-intl issue, and I've filled a suggestion to update docs around it, and I think it could be nice to have a functional example of it on the examples folder of react-testing-library.

Suggested implementation:

I've created a codesandbox to show how easy is to do it, but it has some tricks, and I wonder if it could be an example on this repository, I've followed some guides I found on the readme, and react-redux example.
I've implemented a RenderWithReactIntl component to deal with it.

https://codesandbox.io/s/yq2jz85jx1

I'll be glad to make a PR with it, if you find it valuable.

Thanks in advance.

[kentcdodds]

This is awesome! I definitely would love to have this linked to in the docs.

This bit could be in src/setupTests.js:

  // Test enviroment run as server enviroment and should have polyfill to locale
  // https://formatjs.io/guides/runtime-environments/#server
  if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
  } else {
    global.Intl = require("intl");
  }

[viniciusavieira]

Glad you liked it.

I've updated the codesandbox, give me your thoughts.
If it's ok, should I submit a PR with it?

[viniciusavieira]

PR: #329

[maltebaer]

@viniciusavieira what version of react-intl are you using in your example? If I try to run it with

• react: 16.9.0
• @testing-library/jest-dom/extend-expect: 5.1.1
• testing-library/react: 9.4.0
• react-intl: 3.12.0
• intl: 1.2.5

my test fails because it receives 3/11/2019 instead of 11/03/2019 and I get [React Intl] Missing locale data for locale: "pt". Using default locale: "en" as fallback. as an error.

Any help appreciated :)

[maltebaer]

I just realized that the check for the Intl global in the setup doesn't work properly.

So omitting the check and directly assigning the polyfill works just fine.

import IntlPolyfill from 'intl'

const setupTests = () => {
   global.Intl = IntlPolyfill
}

[viniciusavieira]

@mfelmy sorry for the delayed response.

I believe it was React 16.6.x or 16.7.x.

React and React-intl have changed a lot since them, and I think it is necessary to update the docs about it.

Glad you made it work and pointed here a solution, I'll give it some tests and as soon as possible will try to update the docs and examples around it.

Thanks.