Skip to content

Commit 4302cdd

Browse files
viniciusavieiraKent C. Dodds
authored and
Kent C. Dodds
committed
docs: add example for react intl (#329)
* Example: react-intl example on examples folder. * Contributors add.
1 parent ca313f2 commit 4302cdd

File tree

4 files changed

+60
-2
lines changed

4 files changed

+60
-2
lines changed

.all-contributorsrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -708,6 +708,16 @@
708708
"bug",
709709
"code"
710710
]
711+
},
712+
{
713+
"login": "viniciusavieira",
714+
"name": "Vinicius",
715+
"avatar_url": "https://avatars0.githubusercontent.com/u/2073019?v=4",
716+
"profile": "https://github.com/viniciusavieira",
717+
"contributions": [
718+
"doc",
719+
"example"
720+
]
711721
}
712722
],
713723
"contributorsPerLine": 7

README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ practices.</p>
2626
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
2727
[![MIT License][license-badge]][license]
2828

29-
[![All Contributors](https://img.shields.io/badge/all_contributors-72-orange.svg?style=flat-square)](#contributors)
29+
[![All Contributors](https://img.shields.io/badge/all_contributors-73-orange.svg?style=flat-square)](#contributors)
3030
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
3131
[![Join the community on Spectrum][spectrum-badge]][spectrum]
3232

@@ -221,7 +221,8 @@ Thanks goes to these people ([emoji key][emojis]):
221221
| [<img src="https://avatars2.githubusercontent.com/u/20361668?v=4" width="100px;" alt="Michiel Nuyts"/><br /><sub><b>Michiel Nuyts</b></sub>](https://github.com/Michielnuyts)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;" alt="Joe Ng'ethe"/><br /><sub><b>Joe Ng'ethe</b></sub>](https://github.com/joeynimu)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/19998290?v=4" width="100px;" alt="Kate"/><br /><sub><b>Kate</b></sub>](https://github.com/Enikol)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/11980217?v=4" width="100px;" alt="Sean"/><br /><sub><b>Sean</b></sub>](http://www.seanrparker.com)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/17031?v=4" width="100px;" alt="James Long"/><br /><sub><b>James Long</b></sub>](http://jlongster.com)<br />[🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [<img src="https://avatars1.githubusercontent.com/u/10118777?v=4" width="100px;" alt="Herb Hagely"/><br /><sub><b>Herb Hagely</b></sub>](https://github.com/hhagely)<br />[💡](#example-hhagely "Examples") | [<img src="https://avatars2.githubusercontent.com/u/5779538?v=4" width="100px;" alt="Alex Wendte"/><br /><sub><b>Alex Wendte</b></sub>](http://www.wendtedesigns.com/)<br />[💡](#example-themostcolm "Examples") |
222222
| [<img src="https://avatars0.githubusercontent.com/u/6998954?v=4" width="100px;" alt="Monica Powell"/><br /><sub><b>Monica Powell</b></sub>](http://www.aboutmonica.com)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/2699953?v=4" width="100px;" alt="Vitaly Sivkov"/><br /><sub><b>Vitaly Sivkov</b></sub>](http://sivkoff.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [<img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;" alt="Weyert de Boer"/><br /><sub><b>Weyert de Boer</b></sub>](https://github.com/weyert)<br />[🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/13613037?v=4" width="100px;" alt="EstebanMarin"/><br /><sub><b>EstebanMarin</b></sub>](https://github.com/EstebanMarin)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/13953703?v=4" width="100px;" alt="Victor Martins"/><br /><sub><b>Victor Martins</b></sub>](https://github.com/vctormb)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/19773?v=4" width="100px;" alt="Royston Shufflebotham"/><br /><sub><b>Royston Shufflebotham</b></sub>](https://github.com/RoystonS)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [<img src="https://avatars0.githubusercontent.com/u/6834804?v=4" width="100px;" alt="chrbala"/><br /><sub><b>chrbala</b></sub>](https://github.com/chrbala)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
223223
| [<img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt="Donavon West"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [<img src="https://avatars2.githubusercontent.com/u/689081?v=4" width="100px;" alt="Richard Maisano"/><br /><sub><b>Richard Maisano</b></sub>](https://github.com/maisano)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [<img src="https://avatars0.githubusercontent.com/u/5244986?v=4" width="100px;" alt="Marco Biedermann"/><br /><sub><b>Marco Biedermann</b></sub>](https://www.marcobiedermann.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [<img src="https://avatars3.githubusercontent.com/u/93752?v=4" width="100px;" alt="Alex Zherdev"/><br /><sub><b>Alex Zherdev</b></sub>](https://github.com/alexzherdev)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") | [<img src="https://avatars0.githubusercontent.com/u/5133846?v=4" width="100px;" alt="André Matulionis dos Santos"/><br /><sub><b>André Matulionis dos Santos</b></sub>](https://twitter.com/Andrewmat)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Code") [💡](#example-Andrewmat "Examples") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Tests") | [<img src="https://avatars0.githubusercontent.com/u/1096340?v=4" width="100px;" alt="Daniel K."/><br /><sub><b>Daniel K.</b></sub>](https://github.com/FredyC)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AFredyC "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Code") [🤔](#ideas-FredyC "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Tests") | [<img src="https://avatars0.githubusercontent.com/u/40938625?v=4" width="100px;" alt="mohamedmagdy17593"/><br /><sub><b>mohamedmagdy17593</b></sub>](https://github.com/mohamedmagdy17593)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=mohamedmagdy17593 "Code") |
224-
| [<img src="https://avatars2.githubusercontent.com/u/251288?v=4" width="100px;" alt="Loren ☺️"/><br /><sub><b>Loren ☺️</b></sub>](http://lorensr.me)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=lorensr "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/20678943?v=4" width="100px;" alt="MarkFalconbridge"/><br /><sub><b>MarkFalconbridge</b></sub>](https://github.com/MarkFalconbridge)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AMarkFalconbridge "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=MarkFalconbridge "Code") |
224+
| [<img src="https://avatars2.githubusercontent.com/u/251288?v=4" width="100px;" alt="Loren ☺️"/><br /><sub><b>Loren ☺️</b></sub>](http://lorensr.me)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=lorensr "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/20678943?v=4" width="100px;" alt="MarkFalconbridge"/><br /><sub><b>MarkFalconbridge</b></sub>](https://github.com/MarkFalconbridge)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AMarkFalconbridge "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=MarkFalconbridge "Code") | [<img src="https://avatars0.githubusercontent.com/u/2073019?v=4" width="100px;" alt="Vinicius"/><br /><sub><b>Vinicius</b></sub>](https://github.com/viniciusavieira)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=viniciusavieira "Documentation") [💡](#example-viniciusavieira "Examples") |
225+
225226
<!-- ALL-CONTRIBUTORS-LIST:END -->
226227

227228
This project follows the [all-contributors][all-contributors] specification.

examples/__tests__/react-intl.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react'
2+
import 'jest-dom/extend-expect'
3+
import {render, cleanup, getByTestId} from 'react-testing-library'
4+
import {IntlProvider, FormattedDate} from 'react-intl'
5+
import IntlPolyfill from 'intl'
6+
import 'intl/locale-data/jsonp/pt'
7+
8+
const setupTests = () => {
9+
// Test enviroment run as server enviroment and should have polyfill to locale
10+
// https://formatjs.io/guides/runtime-environments/#server
11+
if (global.Intl) {
12+
Intl.NumberFormat = IntlPolyfill.NumberFormat
13+
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
14+
} else {
15+
global.Intl = require('intl')
16+
}
17+
}
18+
19+
const FormatDateView = () => {
20+
return (
21+
<div data-testid="date-display">
22+
<FormattedDate
23+
value="2019-03-11"
24+
timeZone="utc"
25+
day="2-digit"
26+
month="2-digit"
27+
year="numeric"
28+
/>
29+
</div>
30+
)
31+
}
32+
33+
const renderWithReactIntl = component => {
34+
return {
35+
...render(<IntlProvider locale="pt">{component}</IntlProvider>),
36+
}
37+
}
38+
39+
setupTests()
40+
afterEach(cleanup)
41+
42+
test('it should render FormattedDate and have a formated pt date', () => {
43+
const {container} = renderWithReactIntl(<FormatDateView />)
44+
expect(getByTestId(container, 'date-display')).toHaveTextContent('11/03/2019')
45+
})

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,13 @@
5252
"axios": "^0.18.0",
5353
"eslint-import-resolver-jest": "^2.1.1",
5454
"history": "^4.7.2",
55+
"intl": "^1.2.5",
5556
"jest-dom": "3.0.1",
5657
"jest-in-case": "^1.0.2",
5758
"kcd-scripts": "0.49.0",
5859
"react": "^16.8.0",
5960
"react-dom": "^16.8.0",
61+
"react-intl": "^2.8.0",
6062
"react-redux": "6.0.0",
6163
"react-router": "^4.3.1",
6264
"react-router-dom": "^4.3.1",

0 commit comments

Comments
 (0)