skills/callstack__react-native-testing-library
1
0
Fork 0
mirror of https://github.com/callstack/react-native-testing-library.git synced 2026-09-18 23:09:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: cookbook shoutout ready (#1672)

Browse Source 
* update cookbook app libs. and fix navigation to network requests examples

* Update cookbook/README.md

* Update README.md (2)

* Update Cookbook's Intro. sec. in docs

* upload readme banner

* arranging readme assets

---------

Co-authored-by: stevegalili <steve.galili@mywheels.nl>
This commit is contained in:
Steve Galili
2024-09-30 09:28:19 +02:00
committed by GitHub
parent bd98be05c6
commit f314fe007f
8 changed files with 102 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/cookbook/README.md
+23 -3
View File
@@ -1,10 +1,30 @@
# RNTL Cookbook
<p align="center">
<img alt="banner" src="assets/readme/banner.png" />
</p>
This example app gathers recipes from
the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
# React Native Testing Library Cookbook App
Welcome to the React Native Testing Library (RNTL) Cookbook! This app is designed to provide developers with a collection of best practices, ready-made recipes, and tips & tricks to help you effectively test your React Native applications. Whether you’re just starting out with testing or looking to deepen your skills, this cookbook offers something for everyone.
Each recipe described in the Cookbook should have a corresponding code example screen in this repo.
Note:
Since examples will showcase usage of different dependencies, the dependencies in `package.json`
file will grow much larger that in a normal React Native. This is fine 🐶☕️🔥.
## Running the App
1. Clone the repo `git clone git@github.com:callstack/react-native-testing-library.git`
2. Go to the `examples/cookbook` directory `cd examples/cookbook`
3. Install dependencies `yarn`
4. Run the app `yarn start`
5. Run the app either on iOS or Android by clicking on `i` or `a` in the terminal.
## How to Contribute
We invite all developers, from beginners to experts, to contribute your own recipes! If you have a clever solution, best practice, or useful tip, we encourage you to:
1. Submit a Pull Request with your recipe.
2. Join the conversation on GitHub [here](https://github.com/callstack/react-native-testing-library/issues/1624) to discuss ideas, ask questions, or provide feedback.
## Screenshots From the App
| Home Screen | Phonebook with Net. Req. Example |
|-------------------------------------------------------|-----------------------------------------------------------------|
| ![home-screenshot](assets/readme/home-screenshot.png) | ![phonebook-screenshot](assets/readme/phonebook-screenshot.png) |
examples/cookbook/app/index.tsx
+1 -1
View File
@@ -84,5 +84,5 @@ type Recipe = {
const recipes: Recipe[] = [
{ id: 1, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
{ id: 2, title: 'Task List with Jotai', path: 'state-management/jotai/' },
{ id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'advanced/' },
{ id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'network-requests/' },
];
examples/cookbook/assets/readme/banner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

examples/cookbook/assets/readme/home-screenshot.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

examples/cookbook/assets/readme/phonebook-screenshot.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 KiB

examples/cookbook/package.json
+4 -4
View File
@@ -11,10 +11,10 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"expo": "^51.0.26",
"expo": "~51.0.31",
"expo-constants": "~16.0.2",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.21",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"jotai": "^2.8.4",
@@ -29,8 +29,8 @@
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@expo/metro-runtime": "~3.2.1",
"@testing-library/react-native": "^12.7.1",
"@expo/metro-runtime": "~3.2.3",
"@testing-library/react-native": "^12.7.2",
"@types/eslint": "^8.56.10",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
examples/cookbook/yarn.lock
+48 -46
View File
@@ -1216,9 +1216,9 @@ __metadata:
languageName: node
linkType: hard
"@expo/cli@npm:0.18.28":
version: 0.18.28
resolution: "@expo/cli@npm:0.18.28"
"@expo/cli@npm:0.18.29":
version: 0.18.29
resolution: "@expo/cli@npm:0.18.29"
dependencies:
"@babel/runtime": "npm:^7.20.0"
"@expo/code-signing-certificates": "npm:0.0.5"
@@ -1299,7 +1299,7 @@ __metadata:
ws: "npm:^8.12.1"
bin:
expo-internal: build/bin/cli
checksum: 10c0/fa956b1ddd2a61b62972058cc28a025a1d032effdb1b177fd27651437c368fa1ff8d93da29ea33f78735fbbc064da82d4111a9e09b4fcc3c496ca305f659229e
checksum: 10c0/6e9e86f37b84da600db01cdd554cd76ea6a94a50103fa54731d441dfb1b3a81ef25760c14da99cf6590588e001f5abbacec1b43b3414b61f862b491c12cf2568
languageName: node
linkType: hard
@@ -1450,12 +1450,12 @@ __metadata:
languageName: node
linkType: hard
"@expo/metro-runtime@npm:3.2.1, @expo/metro-runtime@npm:~3.2.1":
version: 3.2.1
resolution: "@expo/metro-runtime@npm:3.2.1"
"@expo/metro-runtime@npm:3.2.3, @expo/metro-runtime@npm:~3.2.3":
version: 3.2.3
resolution: "@expo/metro-runtime@npm:3.2.3"
peerDependencies:
react-native: "*"
checksum: 10c0/8ae119ade669444f6ae89d941b5afde8003750e1666e95fd0d670c52bb839db4ecc0676324db5399c231b3a79f9c11ea667074371d2d1ae702c69b11ded1d52f
checksum: 10c0/a5357c32663e516833feed8f6fd899e1a6ab6acf79b198e860bb82076512e07f95730420eefc87a354d4004d9482b29fbecadcbdcf59b6f8737bba4da03e405e
languageName: node
linkType: hard
@@ -2833,9 +2833,9 @@ __metadata:
languageName: node
linkType: hard
"@testing-library/react-native@npm:^12.7.1":
version: 12.7.1
resolution: "@testing-library/react-native@npm:12.7.1"
"@testing-library/react-native@npm:^12.7.2":
version: 12.7.2
resolution: "@testing-library/react-native@npm:12.7.2"
dependencies:
jest-matcher-utils: "npm:^29.7.0"
pretty-format: "npm:^29.7.0"
@@ -2848,7 +2848,7 @@ __metadata:
peerDependenciesMeta:
jest:
optional: true
checksum: 10c0/caaa4bdf97834b307b72af05c447ce40a2ba2ff40b464050bc29535caadf81981ea2873668445e633fdb3d13efccb136ef0932d6d9f4736bc6f7f98be98088d4
checksum: 10c0/0e4e26bd211056646f8b5c80e9177efc90affe0ddc7e1a2c22742a4e6da7129ec1f9125c7d233adddeb27f429fb3eb91e3f3bfa9e77e176f042475574546b001
languageName: node
linkType: hard
@@ -3632,9 +3632,9 @@ __metadata:
languageName: node
linkType: hard
"babel-preset-expo@npm:~11.0.13":
version: 11.0.13
resolution: "babel-preset-expo@npm:11.0.13"
"babel-preset-expo@npm:~11.0.14":
version: 11.0.14
resolution: "babel-preset-expo@npm:11.0.14"
dependencies:
"@babel/plugin-proposal-decorators": "npm:^7.12.9"
"@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
@@ -3646,7 +3646,7 @@ __metadata:
babel-plugin-react-compiler: "npm:^0.0.0-experimental-592953e-20240517"
babel-plugin-react-native-web: "npm:~0.19.10"
react-refresh: "npm:^0.14.2"
checksum: 10c0/3a377380dd1cfabeb936082b03514638325563b8d7ee02063ccf254adbd53737e889d0439bafbd42a29b569b5f386768a354a8598e7f61390d14100883615308
checksum: 10c0/9d5bb94c21555610c67b7dbe0e592f1ab7f53571dfe72a3ed314768f983a847a9b1dd0efd70e9f172bd68e7dee53d3d012601b8dae27f0593fcdf99c41bcc66f
languageName: node
linkType: hard
@@ -5175,14 +5175,14 @@ __metadata:
languageName: node
linkType: hard
"expo-font@npm:~12.0.9":
version: 12.0.9
resolution: "expo-font@npm:12.0.9"
"expo-font@npm:~12.0.10":
version: 12.0.10
resolution: "expo-font@npm:12.0.10"
dependencies:
fontfaceobserver: "npm:^2.1.0"
peerDependencies:
expo: "*"
checksum: 10c0/9c7b63b3a3ee89bfcdbc1704451019b956b451208f0eca3bb1e57b53dd5dcdfb4d080d423583b92f864889a2a5d7624985c0e5103c54b36b8daf813471696b41
checksum: 10c0/49b7da4c5099f74a3641841e8a684a15b743e0d63bfc60355c7b2cf0a5b33b4321b0657c282126795da5ef53778b4d29a765dc9d08fe395e4bc801662305dee8
languageName: node
linkType: hard
@@ -5205,35 +5205,37 @@ __metadata:
languageName: node
linkType: hard
"expo-modules-autolinking@npm:1.11.1":
version: 1.11.1
resolution: "expo-modules-autolinking@npm:1.11.1"
"expo-modules-autolinking@npm:1.11.2":
version: 1.11.2
resolution: "expo-modules-autolinking@npm:1.11.2"
dependencies:
chalk: "npm:^4.1.0"
commander: "npm:^7.2.0"
fast-glob: "npm:^3.2.5"
find-up: "npm:^5.0.0"
fs-extra: "npm:^9.1.0"
require-from-string: "npm:^2.0.2"
resolve-from: "npm:^5.0.0"
bin:
expo-modules-autolinking: bin/expo-modules-autolinking.js
checksum: 10c0/8d70dda4d63f8ab2323fae13f46191cb8f54d76d6c37f9dc449fbe5a393b5f36f975a9a77ec3257ff880b361999e723be7bc793cbd85eadf9899861cb574469c
checksum: 10c0/3a0da953bcd6f0db6374056216117c8764c8e8cddd51d9fd30990c09080704ecf1abc05425a352a21ae09255d9c9eae99ce34ca6091d27dcd1eb8f0c510e3578
languageName: node
linkType: hard
"expo-modules-core@npm:1.12.20":
version: 1.12.20
resolution: "expo-modules-core@npm:1.12.20"
"expo-modules-core@npm:1.12.24":
version: 1.12.24
resolution: "expo-modules-core@npm:1.12.24"
dependencies:
invariant: "npm:^2.2.4"
checksum: 10c0/f4b5a5c6b54b1fd8bd8ce896ffbbbc50cd0e25d7d55e16441c1c63da770f1f51aef16f7b9e4be745c921af48b99878d3ba14f9372cba6155119388060cce5351
checksum: 10c0/812180ff32f288843592ca38dbebd67878beeb41796a19dd639a2379f0dc728955cff7eabd3e1aedea5ed0c786561334afc41e8fcf206b800c863b8658706d5d
languageName: node
linkType: hard
"expo-router@npm:~3.5.21":
version: 3.5.21
resolution: "expo-router@npm:3.5.21"
"expo-router@npm:~3.5.23":
version: 3.5.23
resolution: "expo-router@npm:3.5.23"
dependencies:
"@expo/metro-runtime": "npm:3.2.1"
"@expo/metro-runtime": "npm:3.2.3"
"@expo/server": "npm:^0.4.0"
"@radix-ui/react-slot": "npm:1.0.1"
"@react-navigation/bottom-tabs": "npm:~6.5.7"
@@ -5258,7 +5260,7 @@ __metadata:
optional: true
react-native-reanimated:
optional: true
checksum: 10c0/84c279f2d6b36557e74b74195e72af9161ff05f65574fc09176a6988a8d0e3911711c7cc8fa3b92b2a08f97662f4d091f1cd5beb2dca14439e450351aa7b7d15
checksum: 10c0/b14b3598ed8bcfcb46d356203f5031a6ee7c4d905d951d22ffd45800329a4bbd1e833e50628f65c2c99d85b9aa94aac4625b4cdd272dc10530cc8d6ebc3ebcda
languageName: node
linkType: hard
@@ -5280,28 +5282,28 @@ __metadata:
languageName: node
linkType: hard
"expo@npm:^51.0.26":
version: 51.0.26
resolution: "expo@npm:51.0.26"
"expo@npm:~51.0.31":
version: 51.0.32
resolution: "expo@npm:51.0.32"
dependencies:
"@babel/runtime": "npm:^7.20.0"
"@expo/cli": "npm:0.18.28"
"@expo/cli": "npm:0.18.29"
"@expo/config": "npm:9.0.3"
"@expo/config-plugins": "npm:8.0.8"
"@expo/metro-config": "npm:0.18.11"
"@expo/vector-icons": "npm:^14.0.0"
babel-preset-expo: "npm:~11.0.13"
babel-preset-expo: "npm:~11.0.14"
expo-asset: "npm:~10.0.10"
expo-file-system: "npm:~17.0.1"
expo-font: "npm:~12.0.9"
expo-font: "npm:~12.0.10"
expo-keep-awake: "npm:~13.0.2"
expo-modules-autolinking: "npm:1.11.1"
expo-modules-core: "npm:1.12.20"
expo-modules-autolinking: "npm:1.11.2"
expo-modules-core: "npm:1.12.24"
fbemitter: "npm:^3.0.0"
whatwg-url-without-unicode: "npm:8.0.0-3"
bin:
expo: bin/cli
checksum: 10c0/092cd106e48b8f31eb7e21c782c38816569ba5a26d50c08b74f5bf795cb835e4f4f803e636392a87b2f3e703d60ab885f9b2d576796be2aa961b99201e455312
checksum: 10c0/8a5ba07402451e027b58a8e64a7051b91d45776f1b3397bfd71a1f2a9d7752a0e50d5343baf53b985f497de3e735f5494322b9f4a68c832c7a034b2d81748409
languageName: node
linkType: hard
@@ -9759,17 +9761,17 @@ __metadata:
resolution: "root-workspace-0b6124@workspace:."
dependencies:
"@babel/core": "npm:^7.20.0"
"@expo/metro-runtime": "npm:~3.2.1"
"@testing-library/react-native": "npm:^12.7.1"
"@expo/metro-runtime": "npm:~3.2.3"
"@testing-library/react-native": "npm:^12.7.2"
"@types/eslint": "npm:^8.56.10"
"@types/jest": "npm:^29.5.12"
"@types/react": "npm:~18.2.45"
"@types/react-native-get-random-values": "npm:^1"
eslint: "npm:^8.57.0"
expo: "npm:^51.0.26"
expo: "npm:~51.0.31"
expo-constants: "npm:~16.0.2"
expo-linking: "npm:~6.3.1"
expo-router: "npm:~3.5.21"
expo-router: "npm:~3.5.23"
expo-splash-screen: "npm:~0.27.5"
expo-status-bar: "npm:~1.12.1"
jest: "npm:^29.7.0"
website/docs/12.x/cookbook/index.md
+26 -2
View File
@@ -1,5 +1,29 @@
# Introduction
This cookbook is intended to showcase best practices, tips & tricks, and ready-to-use recipes for using React Native Testing Library.
Welcome to the **React Native Testing Library (RNTL) Cookbook**!
This app is your go-to resource for learning how to effectively test React Native applications.
It provides a collection of **best practices**, **ready-made recipes**, and **tips & tricks** to
simplify and improve your testing workflow. Whether you’re a beginner just getting started or a
seasoned developer looking to sharpen your
skills, the Cookbook has something for everyone.
We invite you to contribute your favorite recipes to the Cookbook. More info [here](https://github.com/callstack/react-native-testing-library/issues/1624).
## What's Inside the Cookbook?
The Cookbook is currently organized into **three main chapters**:
- **Basic Recipes**: A great starting point, covering essential testing scenarios such as async
operations and custom render functions.
- **Advanced Recipes**: More complex scenarios like network requests and in the future, navigation
testing and more.
- **State Management Recipes**: Best practices for testing state management libraries
Each recipe includes a clear explanation along with a corresponding code example to help you get
hands-on with testing. Checkout
the [Cookbook App](https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook#rntl-cookbook) to see the
recipes in action.
## What's Next?
Join the conversation
on [GitHub](https://github.com/callstack/react-native-testing-library/issues/1624) here to discuss
ideas, ask questions, or provide feedback.