RFC: RNTL Cookbook

[mdjastrzebski]

RNTL Cookbook

RNTL is feature-complete, so the next big frontier is documenting and sharing best practices so our users can get the most out of using RNTL. Specifically, we could have a significant impact by:

• Describe best practices around common tasks like async tests, network calls,
• Provide ready-made recipes for testing popular libraries like state management, React Navigation
• Provide copy-pastable information about mocking and RNTL setup

I propose creating an RNTL Cookbook. It would be a documentation section where we would gather relatively short "recipes" for handling different concerns, tips & tricks, etc.

Proposed topics

Basic

• Jest Config
• Custom Render functions docs: basic cookbook docs and app #1622
• Testing async code
• Mocking in general
• Mocking network calls with fetch
• Mocking React Native parts

Popular libraries

• Gesture Handler
• Reanimated
• ...

Navigation

• React Navigation
• Expo Router (?)

State management

• Redux (classic)
• Redux (RTK)
• Zustand
• Jotai
• Valtio
• ...

Other

• Custom component snapshot matcher (?)
• Testing Event Emitters / Streams

Each documentation page should be brief and accompanied by an easy-to-understand example showcasing the essence of the recipe/technique. Additionally, I will create an examples/cookbook app based on a basic example app that will provide runnable code for all recipes.

We would invite our users to share their own best practices, tips & tricks, etc. so this becomes a crowdsource effort and a common knowledge base making our (developer) lives easier and more productive.

CC: @thymikee @pierrezimmermannbam @MattAgn @AugustinLF

[pierrezimmermannbam]

I love the idea! The topics all seem relevant, I would add a few more I think:

• jest config: there are some areas to explore here but I'm thinking about:
  • which preset to use
  • using clearMocks option
  • using fake timers by default
  • babel or alternatives such as sucrase?
  • config for universal apps
  • transformIgnorePatterns (issues around non transpiled code are very common and very misunderstood)
• custom component snapshot matcher? This is something that we usually use at BAM to have more succinct and more readable snapshots, we could even discuss about adding one to RNTL's custom matchers
• testing event emitters / subscribers

For librairies I'm not sure if it should be in our cookbook or on the librairies's side. We could contribute to other's libraries' documentation though. I think it makes more sense for instance that the recommended setup for testing reanimated is in their documentation

[mdjastrzebski]

@pierrezimmermannbam it would be awesome if you could share some of your practical knowledge in the topics you mentioned (or other).

As for libraries, the idea is not to replace their documentation, but rather link to that, with a brief TLDR version that would simplify the lives of most developers.

[MattAgn]

Love the idea and the topics as well! I'd be glad to help if i get the time.
One area where i see lots of team struggle is testing strategy, where to place your integration test VS unit test VS E2E tests. What type of integration tests should you write etc (I often see integration tests that are very short and only test a very small part of feature)

[mdjastrzebski]

@MattAgn come and join the fun :-)

[vanGalilea]

Great idea, I'd love to think along :) I've mocked Jotai just a while ago.

I might be able to use some snippets from https://github.com/vanGalilea/react-native-testing

🚟 Navigating through screens with Expo Router.
🔚 E2E feel due to real navigation throughout screens.
📡 Mocking fetch calls.

WDYT?

[vanGalilea]

Hey @mdjastrzebski I've raised a PR with a Jotai recipe.

Thanks in advance!

[vanGalilea]

RNTL Cookbook

RNTL is feature-complete, so the next big frontier is documenting and sharing best practices so our users can get the most out of using RNTL. Specifically, we could have a significant impact by:

• Describe best practices around common tasks like async tests, network calls,
• Provide ready-made recipes for testing popular libraries like state management, React Navigation
• Provide copy-pastable information about mocking and RNTL setup

I propose creating an RNTL Cookbook. It would be a documentation section where we would gather relatively short "recipes" for handling different concerns, tips & tricks, etc.

Proposed topics

Basic

• Jest Config
• Custom Render functions docs: basic cookbook docs and app #1622
• Testing async code
• Mocking in general
• Mocking network calls with fetch
• Mocking React Native parts

Popular libraries

• Gesture Handler
• Reanimated
• ...

Navigation

• React Navigation
• Expo Router (?)

State management

• Redux (classic)
• Redux (RTK)
• Zustand
• Jotai
• Valtio
• ...

Other

• Custom component snapshot matcher (?)
• Testing Event Emitters / Streams

Each documentation page should be brief and accompanied by an easy-to-understand example showcasing the essence of the recipe/technique. Additionally, I will create an examples/cookbook app based on a basic example app that will provide runnable code for all recipes.

We would invite our users to share their own best practices, tips & tricks, etc. so this becomes a crowdsource effort and a common knowledge base making our (developer) lives easier and more productive.

CC: @thymikee @pierrezimmermannbam @MattAgn @AugustinLF

We can now update the to do list with check on Jotai and Testing async code!

[vanGalilea]

Now we have 3 recipes and a revamped Cookbook app the next milestone is to announce this on This Week in React.

When is our cookbook "announce-worthy"?
If you ask me, let's wait until I'll add a "Mocking Network Calls" (with Axios, Fetch and MSW).
That wat it will be more "meaty" 🥩

WDYT @mdjastrzebski?

[mdjastrzebski]

@vanGalilea I've started working on recipes for Zustand and Redux. If we have that and Mocking Network Calls (say with fetch for start) we could try to announce it with TWIR.

BTW would you like to contribute the networks calls mocking recipe?

[vanGalilea]

@vanGalilea I've started working on recipes for Zustand and Redux. If we have that and Mocking Network Calls (say with fetch for start) we could try to announce it with TWIR.

BTW would you like to contribute the networks calls mocking recipe?

Cool sounds like a plan 👍🏻 and most certainly I have something already lying around for the networks calls mocking recipe. I'll raise a PR soon 👍🏻

[vanGalilea]

@mdjastrzebski let's check " Mocking network calls with fetch" ✅ and Jotai under state management ✅

Now, let's continue to the next recipes ;)