diff --git a/examples/cookbook/README.md b/examples/cookbook/README.md index 303e50a54..0b87a8b02 100644 --- a/examples/cookbook/README.md +++ b/examples/cookbook/README.md @@ -1,10 +1,30 @@ -# RNTL Cookbook +

+ banner +

-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) | diff --git a/examples/cookbook/app/index.tsx b/examples/cookbook/app/index.tsx index 06564b31a..c6955de1f 100644 --- a/examples/cookbook/app/index.tsx +++ b/examples/cookbook/app/index.tsx @@ -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/' }, ]; diff --git a/examples/cookbook/assets/readme/banner.png b/examples/cookbook/assets/readme/banner.png new file mode 100644 index 000000000..f51b4198f Binary files /dev/null and b/examples/cookbook/assets/readme/banner.png differ diff --git a/examples/cookbook/assets/readme/home-screenshot.png b/examples/cookbook/assets/readme/home-screenshot.png new file mode 100644 index 000000000..e83af1401 Binary files /dev/null and b/examples/cookbook/assets/readme/home-screenshot.png differ diff --git a/examples/cookbook/assets/readme/phonebook-screenshot.png b/examples/cookbook/assets/readme/phonebook-screenshot.png new file mode 100644 index 000000000..a0184530b Binary files /dev/null and b/examples/cookbook/assets/readme/phonebook-screenshot.png differ diff --git a/examples/cookbook/package.json b/examples/cookbook/package.json index 71d4fb024..8c2416cb2 100644 --- a/examples/cookbook/package.json +++ b/examples/cookbook/package.json @@ -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", diff --git a/examples/cookbook/yarn.lock b/examples/cookbook/yarn.lock index 09a29ff8e..acf5f5385 100644 --- a/examples/cookbook/yarn.lock +++ b/examples/cookbook/yarn.lock @@ -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" diff --git a/website/docs/12.x/cookbook/index.md b/website/docs/12.x/cookbook/index.md index fa49d7c32..da99e2155 100644 --- a/website/docs/12.x/cookbook/index.md +++ b/website/docs/12.x/cookbook/index.md @@ -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.