diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md new file mode 100644 index 000000000..4f53cbac3 --- /dev/null +++ b/docs/example-react-intl.md @@ -0,0 +1,82 @@ +--- +id: example-react-intl +title: React Intl +--- + +> **Note** +> +> If you want to combine setupTests with another setup you should check +> [`setup`](react-testing-library/setup.md) + +## 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: + +```jsx +import React from 'react' +import 'jest-dom/extend-expect' +import { render, cleanup, getByTestId } from 'react-testing-library' +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 ( +
+ +
+ ) +} + +const renderWithReactIntl = component => { + return render({component}) +} + +setupTests() +afterEach(cleanup) + +test('it should render FormattedDate and have a formated pt date', () => { + const { container } = renderWithReactIntl() + expect(getByTestId(container, 'date-display')).toHaveTextContent('11/03/2019') +}) +``` diff --git a/website/sidebars.json b/website/sidebars.json index cbeb06325..dadff10c0 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -12,6 +12,7 @@ "example-input-event", "example-update-props", "example-react-context", + "example-react-intl", "example-react-redux", "example-react-router", "example-reach-router",