Skip to content

Commit 090784d

Browse files
committed
Add docs for usage with React Native
1 parent b79104a commit 090784d

File tree

1 file changed

+71
-45
lines changed

1 file changed

+71
-45
lines changed

README.md

Lines changed: 71 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -125,34 +125,35 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
125125
## Table of Contents
126126

127127
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
128+
128129
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
129130

130-
- [Installation](#installation)
131-
- [Setup](#setup)
132-
- [Global Config](#global-config)
133-
- [Custom Render](#custom-render)
134-
- [Usage](#usage)
135-
- [`render`](#render)
136-
- [`cleanup`](#cleanup)
137-
- [`dom-testing-library` APIs](#dom-testing-library-apis)
138-
- [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)
139-
- [`waitForElement`](#waitforelement)
140-
- [`wait`](#wait)
141-
- [`within`](#within)
142-
- [`TextMatch`](#textmatch)
143-
- [`query` APIs](#query-apis)
144-
- [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
145-
- [Examples](#examples)
146-
- [Learning Material](#learning-material)
147-
- [FAQ](#faq)
148-
- [Other Solutions](#other-solutions)
149-
- [Guiding Principles](#guiding-principles)
150-
- [Contributors](#contributors)
151-
- [Issues](#issues)
152-
- [🐛 Bugs](#-bugs)
153-
- [💡 Feature Requests](#-feature-requests)
154-
- [❓ Questions](#-questions)
155-
- [LICENSE](#license)
131+
* [Installation](#installation)
132+
* [Setup](#setup)
133+
* [Global Config](#global-config)
134+
* [Custom Render](#custom-render)
135+
* [Usage](#usage)
136+
* [`render`](#render)
137+
* [`cleanup`](#cleanup)
138+
* [`dom-testing-library` APIs](#dom-testing-library-apis)
139+
* [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)
140+
* [`waitForElement`](#waitforelement)
141+
* [`wait`](#wait)
142+
* [`within`](#within)
143+
* [`TextMatch`](#textmatch)
144+
* [`query` APIs](#query-apis)
145+
* [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
146+
* [Examples](#examples)
147+
* [Learning Material](#learning-material)
148+
* [FAQ](#faq)
149+
* [Other Solutions](#other-solutions)
150+
* [Guiding Principles](#guiding-principles)
151+
* [Contributors](#contributors)
152+
* [Issues](#issues)
153+
* [🐛 Bugs](#-bugs)
154+
* [💡 Feature Requests](#-feature-requests)
155+
* [❓ Questions](#-questions)
156+
* [LICENSE](#license)
156157

157158
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
158159

@@ -802,39 +803,39 @@ You'll find examples of testing with different libraries in
802803
[the `examples` directory](https://github.com/kentcdodds/react-testing-library/blob/master/examples).
803804
Some included are:
804805
805-
- [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-redux.js)
806-
- [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-router.js)
807-
- [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-context.js)
806+
* [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-redux.js)
807+
* [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-router.js)
808+
* [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-context.js)
808809
809810
## Learning Material
810811
811-
- [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
812+
* [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
812813
813-
- [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
814-
- [Test Driven Development with react-testing-library](https://www.youtube.com/watch?v=kCR3JAR7CHE&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
815-
- [Testing React and Web Applications](https://kentcdodds.com/workshops/#testing-react-and-web-applications)
816-
- [Build a joke app with TDD](https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64)
814+
* [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
815+
* [Test Driven Development with react-testing-library](https://www.youtube.com/watch?v=kCR3JAR7CHE&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
816+
* [Testing React and Web Applications](https://kentcdodds.com/workshops/#testing-react-and-web-applications)
817+
* [Build a joke app with TDD](https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64)
817818
by [@mbaranovski](https://github.com/mbaranovski)
818-
- [Build a comment feed with TDD](https://medium.freecodecamp.org/how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library-47ad3c5c8e47)
819+
* [Build a comment feed with TDD](https://medium.freecodecamp.org/how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library-47ad3c5c8e47)
819820
by [@iwilsonq](https://github.com/iwilsonq)
820-
- [A clear way to unit testing React JS components using Jest and react-testing-library](https://www.richardkotze.com/coding/react-testing-library-jest)
821+
* [A clear way to unit testing React JS components using Jest and react-testing-library](https://www.richardkotze.com/coding/react-testing-library-jest)
821822
by [Richard Kotze](https://github.com/rkotze)
822823
823-
- [Intro to react-testing-library](https://chrisnoring.gitbooks.io/react/content/testing/react-testing-library.html)
824+
* [Intro to react-testing-library](https://chrisnoring.gitbooks.io/react/content/testing/react-testing-library.html)
824825
by [Chris Noring](https://github.com/softchris)
825-
- [Integration testing in React](https://medium.com/@jeffreyrussom/integration-testing-in-react-21f92a55a894)
826+
* [Integration testing in React](https://medium.com/@jeffreyrussom/integration-testing-in-react-21f92a55a894)
826827
by [Jeffrey Russom](https://github.com/qswitcher)
827828
828-
- [React-testing-library have fantastic testing 🐐](https://medium.com/yazanaabed/react-testing-library-have-a-fantastic-testing-198b04699237)
829+
* [React-testing-library have fantastic testing 🐐](https://medium.com/yazanaabed/react-testing-library-have-a-fantastic-testing-198b04699237)
829830
by [Yazan Aabed](https://github.com/YazanAabeed)
830831
831-
- [Building a React Tooltip Library](https://www.youtube.com/playlist?list=PLMV09mSPNaQmFLPyrfFtpUdClVfutjF5G)
832+
* [Building a React Tooltip Library](https://www.youtube.com/playlist?list=PLMV09mSPNaQmFLPyrfFtpUdClVfutjF5G)
832833
by [divyanshu013](https://github.com/divyanshu013) and
833834
[metagrover](https://github.com/metagrover)
834835
835-
- [A sample repo using react-testing-library to test a Relay Modern GraphQL app](https://github.com/zth/relay-modern-flow-jest-example)
836+
* [A sample repo using react-testing-library to test a Relay Modern GraphQL app](https://github.com/zth/relay-modern-flow-jest-example)
836837
837-
- [Creating Readable Tests Using React Testing Library](https://medium.com/flatiron-labs/creating-readable-tests-using-react-testing-library-2bd03c49c284)
838+
* [Creating Readable Tests Using React Testing Library](https://medium.com/flatiron-labs/creating-readable-tests-using-react-testing-library-2bd03c49c284)
838839
by [Lukeghenco](https://github.com/Lukeghenco)
839840
840841
Feel free to contribute more!
@@ -1128,6 +1129,30 @@ snapshotDiff(firstVersion, container.cloneNode(true))
11281129
11291130
</details>
11301131
1132+
<details>
1133+
1134+
<summary>Does this library work with React Native?</summary>
1135+
1136+
> This is still quite experimental - please contribute with your own
1137+
> results/findings!
1138+
1139+
The short answer is yes, but with a few caveats. It's possible to replicate a
1140+
lot of DOM functionality with
1141+
[`react-native-web`](https://github.com/necolas/react-native-web), allowing you
1142+
to use the query APIs like `getByText`. You can then add a `press` event to
1143+
`fireEvent` that simulates a mouseDown immediately followed by a mouseUp, and
1144+
call this with Touchable\* components.
1145+
1146+
One thing this approach does _not_ support is any kind of native module
1147+
functionality (like native navigation modules). The way around this is to design
1148+
your components so that as much of the functionality you need tested is
1149+
encapsulated outside of any native module functionality.
1150+
1151+
For a barebones example of testing a React Native component,
1152+
[see here](https://github.com/thchia/rn-testing-library-example).
1153+
1154+
</details>
1155+
11311156
## Other Solutions
11321157
11331158
In preparing this project,
@@ -1165,6 +1190,7 @@ light-weight, simple, and understandable.
11651190
Thanks goes to these people ([emoji key][emojis]):
11661191
11671192
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
1193+
11681194
<!-- prettier-ignore -->
11691195
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
11701196
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
@@ -1204,9 +1230,9 @@ a 👍. This helps maintainers prioritize what to work on.
12041230
For questions related to using the library, please visit a support community
12051231
instead of filing an issue on GitHub.
12061232
1207-
- [Spectrum][spectrum]
1208-
- [Reactiflux on Discord][reactiflux]
1209-
- [Stack Overflow][stackoverflow]
1233+
* [Spectrum][spectrum]
1234+
* [Reactiflux on Discord][reactiflux]
1235+
* [Stack Overflow][stackoverflow]
12101236
12111237
## LICENSE
12121238

0 commit comments

Comments
 (0)