From 4692b90f1448a48de41b94207cde11439f89bb9d Mon Sep 17 00:00:00 2001 From: Vinicius Date: Wed, 20 Mar 2019 16:31:40 -0300 Subject: [PATCH 1/5] Example of react-intl added. --- docs/example-react-intl.md | 51 ++++++++++++++++++++++++++++++++++++++ website/sidebars.json | 1 + yarn.lock | 4 +++ 3 files changed, 56 insertions(+) create mode 100644 docs/example-react-intl.md create mode 100644 yarn.lock diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md new file mode 100644 index 000000000..7d1b41b53 --- /dev/null +++ b/docs/example-react-intl.md @@ -0,0 +1,51 @@ +--- +id: example-react-intl +title: React Intl +--- + +```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 = require('intl') + } +} + +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", diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 000000000..fb57ccd13 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + From 236cb3e93ebd94e062050fb215c4a3a141886c93 Mon Sep 17 00:00:00 2001 From: Vinicius Date: Wed, 20 Mar 2019 16:32:41 -0300 Subject: [PATCH 2/5] Fixed unecessary require --- docs/example-react-intl.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md index 7d1b41b53..421198384 100644 --- a/docs/example-react-intl.md +++ b/docs/example-react-intl.md @@ -17,7 +17,7 @@ const setupTests = () => { Intl.NumberFormat = IntlPolyfill.NumberFormat Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat } else { - global.Intl = require('intl') + global.Intl = IntlPolyfill } } From a670fbac07019b255e4f454abbee59288213a201 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Wed, 20 Mar 2019 12:54:53 -0700 Subject: [PATCH 3/5] Delete yarn.lock --- yarn.lock | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 yarn.lock diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index fb57ccd13..000000000 --- a/yarn.lock +++ /dev/null @@ -1,4 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - From 8b4b467b7344d3370df1e56e0d189b1e0610fb60 Mon Sep 17 00:00:00 2001 From: Vinicius Date: Wed, 20 Mar 2019 17:26:18 -0300 Subject: [PATCH 4/5] Improved description and added a React-Intl setup description on setup. --- docs/example-react-intl.md | 9 ++++++--- docs/react-testing-library/setup.md | 26 ++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md index 421198384..d0c472b36 100644 --- a/docs/example-react-intl.md +++ b/docs/example-react-intl.md @@ -3,6 +3,11 @@ 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) + ```jsx import React from 'react' import 'jest-dom/extend-expect' @@ -36,9 +41,7 @@ const FormatDateView = () => { } const renderWithReactIntl = component => { - return { - ...render({component}), - } + return render({component}) } setupTests() diff --git a/docs/react-testing-library/setup.md b/docs/react-testing-library/setup.md index af59c5ba2..923460502 100644 --- a/docs/react-testing-library/setup.md +++ b/docs/react-testing-library/setup.md @@ -226,3 +226,29 @@ mocha --require jsdom-global/register Note, depending on the version of Node you're running, you may also need to install @babel/polyfill (if you're using babel 7) or babel-polyfill (for babel 6). + +## 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(); +``` From b7e1d7a8fc87cbcfb86d5a67b3655ad1e78958b6 Mon Sep 17 00:00:00 2001 From: Vinicius Vieira Date: Wed, 20 Mar 2019 22:11:11 -0300 Subject: [PATCH 5/5] Moved description from setp to example-react-intl --- docs/example-react-intl.md | 28 ++++++++++++++++++++++++++++ docs/react-testing-library/setup.md | 26 -------------------------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md index d0c472b36..4f53cbac3 100644 --- a/docs/example-react-intl.md +++ b/docs/example-react-intl.md @@ -8,6 +8,34 @@ title: React Intl > 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' diff --git a/docs/react-testing-library/setup.md b/docs/react-testing-library/setup.md index 923460502..af59c5ba2 100644 --- a/docs/react-testing-library/setup.md +++ b/docs/react-testing-library/setup.md @@ -226,29 +226,3 @@ mocha --require jsdom-global/register Note, depending on the version of Node you're running, you may also need to install @babel/polyfill (if you're using babel 7) or babel-polyfill (for babel 6). - -## 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(); -```