Skip to content

Commit f314fe0

Browse files
vanGalileastevegalili
vanGalilea
and
stevegalili
authored
docs: cookbook shoutout ready (#1672)
* 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>
1 parent bd98be0 commit f314fe0

File tree

8 files changed

+102
-56
lines changed

8 files changed

+102
-56
lines changed

‎examples/cookbook/README.md

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,30 @@
1-
# RNTL Cookbook
1+
<p align="center">
2+
<img alt="banner" src="assets/readme/banner.png" />
3+
</p>
24

3-
This example app gathers recipes from
4-
the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
5+
# React Native Testing Library Cookbook App
6+
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.
57

68
Each recipe described in the Cookbook should have a corresponding code example screen in this repo.
79

810
Note:
911
Since examples will showcase usage of different dependencies, the dependencies in `package.json`
1012
file will grow much larger that in a normal React Native. This is fine 🐶☕️🔥.
13+
14+
## Running the App
15+
1. Clone the repo `git clone git@github.com:callstack/react-native-testing-library.git`
16+
2. Go to the `examples/cookbook` directory `cd examples/cookbook`
17+
3. Install dependencies `yarn`
18+
4. Run the app `yarn start`
19+
5. Run the app either on iOS or Android by clicking on `i` or `a` in the terminal.
20+
21+
## How to Contribute
22+
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:
23+
24+
1. Submit a Pull Request with your recipe.
25+
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.
26+
27+
## Screenshots From the App
28+
| Home Screen | Phonebook with Net. Req. Example |
29+
|-------------------------------------------------------|-----------------------------------------------------------------|
30+
| ![home-screenshot](assets/readme/home-screenshot.png) | ![phonebook-screenshot](assets/readme/phonebook-screenshot.png) |

‎examples/cookbook/app/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,5 @@ type Recipe = {
8484
const recipes: Recipe[] = [
8585
{ id: 1, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
8686
{ id: 2, title: 'Task List with Jotai', path: 'state-management/jotai/' },
87-
{ id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'advanced/' },
87+
{ id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'network-requests/' },
8888
];

‎examples/cookbook/assets/readme/banner.png

103 KB
Loading

‎examples/cookbook/assets/readme/home-screenshot.png

212 KB
Loading

‎examples/cookbook/assets/readme/phonebook-screenshot.png

774 KB
Loading

‎examples/cookbook/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"typecheck": "tsc --noEmit"
1212
},
1313
"dependencies": {
14-
"expo": "^51.0.26",
14+
"expo": "~51.0.31",
1515
"expo-constants": "~16.0.2",
1616
"expo-linking": "~6.3.1",
17-
"expo-router": "~3.5.21",
17+
"expo-router": "~3.5.23",
1818
"expo-splash-screen": "~0.27.5",
1919
"expo-status-bar": "~1.12.1",
2020
"jotai": "^2.8.4",
@@ -29,8 +29,8 @@
2929
},
3030
"devDependencies": {
3131
"@babel/core": "^7.20.0",
32-
"@expo/metro-runtime": "~3.2.1",
33-
"@testing-library/react-native": "^12.7.1",
32+
"@expo/metro-runtime": "~3.2.3",
33+
"@testing-library/react-native": "^12.7.2",
3434
"@types/eslint": "^8.56.10",
3535
"@types/jest": "^29.5.12",
3636
"@types/react": "~18.2.45",

‎examples/cookbook/yarn.lock

+48-46
Original file line numberDiff line numberDiff line change
@@ -1216,9 +1216,9 @@ __metadata:
12161216
languageName: node
12171217
linkType: hard
12181218

1219-
"@expo/cli@npm:0.18.28":
1220-
version: 0.18.28
1221-
resolution: "@expo/cli@npm:0.18.28"
1219+
"@expo/cli@npm:0.18.29":
1220+
version: 0.18.29
1221+
resolution: "@expo/cli@npm:0.18.29"
12221222
dependencies:
12231223
"@babel/runtime": "npm:^7.20.0"
12241224
"@expo/code-signing-certificates": "npm:0.0.5"
@@ -1299,7 +1299,7 @@ __metadata:
12991299
ws: "npm:^8.12.1"
13001300
bin:
13011301
expo-internal: build/bin/cli
1302-
checksum: 10c0/fa956b1ddd2a61b62972058cc28a025a1d032effdb1b177fd27651437c368fa1ff8d93da29ea33f78735fbbc064da82d4111a9e09b4fcc3c496ca305f659229e
1302+
checksum: 10c0/6e9e86f37b84da600db01cdd554cd76ea6a94a50103fa54731d441dfb1b3a81ef25760c14da99cf6590588e001f5abbacec1b43b3414b61f862b491c12cf2568
13031303
languageName: node
13041304
linkType: hard
13051305

@@ -1450,12 +1450,12 @@ __metadata:
14501450
languageName: node
14511451
linkType: hard
14521452

1453-
"@expo/metro-runtime@npm:3.2.1, @expo/metro-runtime@npm:~3.2.1":
1454-
version: 3.2.1
1455-
resolution: "@expo/metro-runtime@npm:3.2.1"
1453+
"@expo/metro-runtime@npm:3.2.3, @expo/metro-runtime@npm:~3.2.3":
1454+
version: 3.2.3
1455+
resolution: "@expo/metro-runtime@npm:3.2.3"
14561456
peerDependencies:
14571457
react-native: "*"
1458-
checksum: 10c0/8ae119ade669444f6ae89d941b5afde8003750e1666e95fd0d670c52bb839db4ecc0676324db5399c231b3a79f9c11ea667074371d2d1ae702c69b11ded1d52f
1458+
checksum: 10c0/a5357c32663e516833feed8f6fd899e1a6ab6acf79b198e860bb82076512e07f95730420eefc87a354d4004d9482b29fbecadcbdcf59b6f8737bba4da03e405e
14591459
languageName: node
14601460
linkType: hard
14611461

@@ -2833,9 +2833,9 @@ __metadata:
28332833
languageName: node
28342834
linkType: hard
28352835

2836-
"@testing-library/react-native@npm:^12.7.1":
2837-
version: 12.7.1
2838-
resolution: "@testing-library/react-native@npm:12.7.1"
2836+
"@testing-library/react-native@npm:^12.7.2":
2837+
version: 12.7.2
2838+
resolution: "@testing-library/react-native@npm:12.7.2"
28392839
dependencies:
28402840
jest-matcher-utils: "npm:^29.7.0"
28412841
pretty-format: "npm:^29.7.0"
@@ -2848,7 +2848,7 @@ __metadata:
28482848
peerDependenciesMeta:
28492849
jest:
28502850
optional: true
2851-
checksum: 10c0/caaa4bdf97834b307b72af05c447ce40a2ba2ff40b464050bc29535caadf81981ea2873668445e633fdb3d13efccb136ef0932d6d9f4736bc6f7f98be98088d4
2851+
checksum: 10c0/0e4e26bd211056646f8b5c80e9177efc90affe0ddc7e1a2c22742a4e6da7129ec1f9125c7d233adddeb27f429fb3eb91e3f3bfa9e77e176f042475574546b001
28522852
languageName: node
28532853
linkType: hard
28542854

@@ -3632,9 +3632,9 @@ __metadata:
36323632
languageName: node
36333633
linkType: hard
36343634

3635-
"babel-preset-expo@npm:~11.0.13":
3636-
version: 11.0.13
3637-
resolution: "babel-preset-expo@npm:11.0.13"
3635+
"babel-preset-expo@npm:~11.0.14":
3636+
version: 11.0.14
3637+
resolution: "babel-preset-expo@npm:11.0.14"
36383638
dependencies:
36393639
"@babel/plugin-proposal-decorators": "npm:^7.12.9"
36403640
"@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
@@ -3646,7 +3646,7 @@ __metadata:
36463646
babel-plugin-react-compiler: "npm:^0.0.0-experimental-592953e-20240517"
36473647
babel-plugin-react-native-web: "npm:~0.19.10"
36483648
react-refresh: "npm:^0.14.2"
3649-
checksum: 10c0/3a377380dd1cfabeb936082b03514638325563b8d7ee02063ccf254adbd53737e889d0439bafbd42a29b569b5f386768a354a8598e7f61390d14100883615308
3649+
checksum: 10c0/9d5bb94c21555610c67b7dbe0e592f1ab7f53571dfe72a3ed314768f983a847a9b1dd0efd70e9f172bd68e7dee53d3d012601b8dae27f0593fcdf99c41bcc66f
36503650
languageName: node
36513651
linkType: hard
36523652

@@ -5175,14 +5175,14 @@ __metadata:
51755175
languageName: node
51765176
linkType: hard
51775177

5178-
"expo-font@npm:~12.0.9":
5179-
version: 12.0.9
5180-
resolution: "expo-font@npm:12.0.9"
5178+
"expo-font@npm:~12.0.10":
5179+
version: 12.0.10
5180+
resolution: "expo-font@npm:12.0.10"
51815181
dependencies:
51825182
fontfaceobserver: "npm:^2.1.0"
51835183
peerDependencies:
51845184
expo: "*"
5185-
checksum: 10c0/9c7b63b3a3ee89bfcdbc1704451019b956b451208f0eca3bb1e57b53dd5dcdfb4d080d423583b92f864889a2a5d7624985c0e5103c54b36b8daf813471696b41
5185+
checksum: 10c0/49b7da4c5099f74a3641841e8a684a15b743e0d63bfc60355c7b2cf0a5b33b4321b0657c282126795da5ef53778b4d29a765dc9d08fe395e4bc801662305dee8
51865186
languageName: node
51875187
linkType: hard
51885188

@@ -5205,35 +5205,37 @@ __metadata:
52055205
languageName: node
52065206
linkType: hard
52075207

5208-
"expo-modules-autolinking@npm:1.11.1":
5209-
version: 1.11.1
5210-
resolution: "expo-modules-autolinking@npm:1.11.1"
5208+
"expo-modules-autolinking@npm:1.11.2":
5209+
version: 1.11.2
5210+
resolution: "expo-modules-autolinking@npm:1.11.2"
52115211
dependencies:
52125212
chalk: "npm:^4.1.0"
52135213
commander: "npm:^7.2.0"
52145214
fast-glob: "npm:^3.2.5"
52155215
find-up: "npm:^5.0.0"
52165216
fs-extra: "npm:^9.1.0"
5217+
require-from-string: "npm:^2.0.2"
5218+
resolve-from: "npm:^5.0.0"
52175219
bin:
52185220
expo-modules-autolinking: bin/expo-modules-autolinking.js
5219-
checksum: 10c0/8d70dda4d63f8ab2323fae13f46191cb8f54d76d6c37f9dc449fbe5a393b5f36f975a9a77ec3257ff880b361999e723be7bc793cbd85eadf9899861cb574469c
5221+
checksum: 10c0/3a0da953bcd6f0db6374056216117c8764c8e8cddd51d9fd30990c09080704ecf1abc05425a352a21ae09255d9c9eae99ce34ca6091d27dcd1eb8f0c510e3578
52205222
languageName: node
52215223
linkType: hard
52225224

5223-
"expo-modules-core@npm:1.12.20":
5224-
version: 1.12.20
5225-
resolution: "expo-modules-core@npm:1.12.20"
5225+
"expo-modules-core@npm:1.12.24":
5226+
version: 1.12.24
5227+
resolution: "expo-modules-core@npm:1.12.24"
52265228
dependencies:
52275229
invariant: "npm:^2.2.4"
5228-
checksum: 10c0/f4b5a5c6b54b1fd8bd8ce896ffbbbc50cd0e25d7d55e16441c1c63da770f1f51aef16f7b9e4be745c921af48b99878d3ba14f9372cba6155119388060cce5351
5230+
checksum: 10c0/812180ff32f288843592ca38dbebd67878beeb41796a19dd639a2379f0dc728955cff7eabd3e1aedea5ed0c786561334afc41e8fcf206b800c863b8658706d5d
52295231
languageName: node
52305232
linkType: hard
52315233

5232-
"expo-router@npm:~3.5.21":
5233-
version: 3.5.21
5234-
resolution: "expo-router@npm:3.5.21"
5234+
"expo-router@npm:~3.5.23":
5235+
version: 3.5.23
5236+
resolution: "expo-router@npm:3.5.23"
52355237
dependencies:
5236-
"@expo/metro-runtime": "npm:3.2.1"
5238+
"@expo/metro-runtime": "npm:3.2.3"
52375239
"@expo/server": "npm:^0.4.0"
52385240
"@radix-ui/react-slot": "npm:1.0.1"
52395241
"@react-navigation/bottom-tabs": "npm:~6.5.7"
@@ -5258,7 +5260,7 @@ __metadata:
52585260
optional: true
52595261
react-native-reanimated:
52605262
optional: true
5261-
checksum: 10c0/84c279f2d6b36557e74b74195e72af9161ff05f65574fc09176a6988a8d0e3911711c7cc8fa3b92b2a08f97662f4d091f1cd5beb2dca14439e450351aa7b7d15
5263+
checksum: 10c0/b14b3598ed8bcfcb46d356203f5031a6ee7c4d905d951d22ffd45800329a4bbd1e833e50628f65c2c99d85b9aa94aac4625b4cdd272dc10530cc8d6ebc3ebcda
52625264
languageName: node
52635265
linkType: hard
52645266

@@ -5280,28 +5282,28 @@ __metadata:
52805282
languageName: node
52815283
linkType: hard
52825284

5283-
"expo@npm:^51.0.26":
5284-
version: 51.0.26
5285-
resolution: "expo@npm:51.0.26"
5285+
"expo@npm:~51.0.31":
5286+
version: 51.0.32
5287+
resolution: "expo@npm:51.0.32"
52865288
dependencies:
52875289
"@babel/runtime": "npm:^7.20.0"
5288-
"@expo/cli": "npm:0.18.28"
5290+
"@expo/cli": "npm:0.18.29"
52895291
"@expo/config": "npm:9.0.3"
52905292
"@expo/config-plugins": "npm:8.0.8"
52915293
"@expo/metro-config": "npm:0.18.11"
52925294
"@expo/vector-icons": "npm:^14.0.0"
5293-
babel-preset-expo: "npm:~11.0.13"
5295+
babel-preset-expo: "npm:~11.0.14"
52945296
expo-asset: "npm:~10.0.10"
52955297
expo-file-system: "npm:~17.0.1"
5296-
expo-font: "npm:~12.0.9"
5298+
expo-font: "npm:~12.0.10"
52975299
expo-keep-awake: "npm:~13.0.2"
5298-
expo-modules-autolinking: "npm:1.11.1"
5299-
expo-modules-core: "npm:1.12.20"
5300+
expo-modules-autolinking: "npm:1.11.2"
5301+
expo-modules-core: "npm:1.12.24"
53005302
fbemitter: "npm:^3.0.0"
53015303
whatwg-url-without-unicode: "npm:8.0.0-3"
53025304
bin:
53035305
expo: bin/cli
5304-
checksum: 10c0/092cd106e48b8f31eb7e21c782c38816569ba5a26d50c08b74f5bf795cb835e4f4f803e636392a87b2f3e703d60ab885f9b2d576796be2aa961b99201e455312
5306+
checksum: 10c0/8a5ba07402451e027b58a8e64a7051b91d45776f1b3397bfd71a1f2a9d7752a0e50d5343baf53b985f497de3e735f5494322b9f4a68c832c7a034b2d81748409
53055307
languageName: node
53065308
linkType: hard
53075309

@@ -9759,17 +9761,17 @@ __metadata:
97599761
resolution: "root-workspace-0b6124@workspace:."
97609762
dependencies:
97619763
"@babel/core": "npm:^7.20.0"
9762-
"@expo/metro-runtime": "npm:~3.2.1"
9763-
"@testing-library/react-native": "npm:^12.7.1"
9764+
"@expo/metro-runtime": "npm:~3.2.3"
9765+
"@testing-library/react-native": "npm:^12.7.2"
97649766
"@types/eslint": "npm:^8.56.10"
97659767
"@types/jest": "npm:^29.5.12"
97669768
"@types/react": "npm:~18.2.45"
97679769
"@types/react-native-get-random-values": "npm:^1"
97689770
eslint: "npm:^8.57.0"
9769-
expo: "npm:^51.0.26"
9771+
expo: "npm:~51.0.31"
97709772
expo-constants: "npm:~16.0.2"
97719773
expo-linking: "npm:~6.3.1"
9772-
expo-router: "npm:~3.5.21"
9774+
expo-router: "npm:~3.5.23"
97739775
expo-splash-screen: "npm:~0.27.5"
97749776
expo-status-bar: "npm:~1.12.1"
97759777
jest: "npm:^29.7.0"

‎website/docs/12.x/cookbook/index.md

+26-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
# Introduction
22

3-
This cookbook is intended to showcase best practices, tips & tricks, and ready-to-use recipes for using React Native Testing Library.
3+
Welcome to the **React Native Testing Library (RNTL) Cookbook**!
4+
This app is your go-to resource for learning how to effectively test React Native applications.
5+
It provides a collection of **best practices**, **ready-made recipes**, and **tips & tricks** to
6+
simplify and improve your testing workflow. Whether you’re a beginner just getting started or a
7+
seasoned developer looking to sharpen your
8+
skills, the Cookbook has something for everyone.
49

5-
We invite you to contribute your favorite recipes to the Cookbook. More info [here](https://github.com/callstack/react-native-testing-library/issues/1624).
10+
## What's Inside the Cookbook?
11+
12+
The Cookbook is currently organized into **three main chapters**:
13+
14+
- **Basic Recipes**: A great starting point, covering essential testing scenarios such as async
15+
operations and custom render functions.
16+
- **Advanced Recipes**: More complex scenarios like network requests and in the future, navigation
17+
testing and more.
18+
- **State Management Recipes**: Best practices for testing state management libraries
19+
20+
Each recipe includes a clear explanation along with a corresponding code example to help you get
21+
hands-on with testing. Checkout
22+
the [Cookbook App](https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook#rntl-cookbook) to see the
23+
recipes in action.
24+
25+
## What's Next?
26+
27+
Join the conversation
28+
on [GitHub](https://github.com/callstack/react-native-testing-library/issues/1624) here to discuss
29+
ideas, ask questions, or provide feedback.

0 commit comments

Comments
 (0)