Update testing section

[kligarski]

This PR is a continuation of (#1374).

Description

Adding examples to the testing section of the documentation ("Testing with Jest").

Changes

• changed setup of mocking react-native-reanimated and added a link to the docs of Reanimated,
• added example of mocking react-native-screens (from previous PR),
• added new real-life examples:
  • navigation between tabs,
  • reacting to navigation events (text showing after animation ends (stack naviagator)),
  • example with stack, tabs and tabPress,
  • example with useFocusEffect and data fetching
• fixed getBy vs queryBy according to the suggestion from the previous PR (Update testing section #1374 (comment))

[netlify]

✅ Deploy Preview for react-navigation-docs ready!

Name	Link
🔨 Latest commit	3979f95
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-docs/deploys/67d59ed0c901490008d1f9f3
😎 Deploy Preview	https://deploy-preview-1404--react-navigation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kligarski]

In the Example 4, adding jest.useFakeTimers() even without running the timers fixes an issue with React state update warnings from React Testing Library (they sometimes appear when running the test). I tried wrapping various parts of the test in act with no success. I suspect it is connected with fetching the data asynchronously but I'm not sure what the issue is exactly and why using fake timers helps with this problem.

[kligarski]

@kkafar

[kkafar]

Looks good to me! I've added few suggestions & changes requests.

IMO this is is.

I'll want to get input from @satya164 before merging though.

[kkafar]

We need to improve the PR description slightly before we land it.
Other than that - great job. Also shoutout to @AnCichocka for the bulk of the work.

[kligarski]

PR description updated.

[satya164]

Thanks for the PR!

I left some comments to align the examples with current best practices. I only commented on a few of the usage sites, but they apply to all other places using similar code.

[kligarski]

@satya164 I have a little problem with documenting the usage of fake timers. After changing tests to async (to use User Event API instead of Fire Event API), they work (without warnings) only if I setup the fake timers (even when I don't need to use jest.runAllTimers()). For now, I changed the examples to always use fake timers and commented out previous explanations because they seem to be incorrect. Would you be able to give me a short explanation or share some tips/resources so I can learn more about it and document it properly?

The warning I get is Warning: An update to Animated(Pressable) inside a test was not wrapped in act(...).. I tried wrapping many different parts of the test in act, but I wasn't able to get it to work without a warning. The stacktrace involves a file from reanimated (react-native-reanimated/lib/module/mockedRequestAnimationFrame.js), but e.g. example 1 uses tabs and as far as I know by default they don't use any transitions, so I am not sure whether the problem is connected with reanimated.

[satya164]

@satya164 I have a little problem with documenting the usage of fake timers. After changing tests to async (to use User Event API instead of Fire Event API), they work (without warnings) only if I setup the fake timers (even when I don't need to use jest.runAllTimers()). For now, I changed the examples to always use fake timers and commented out previous explanations because they seem to be incorrect. Would you be able to give me a short explanation or share some tips/resources so I can learn more about it and document it properly?

The warning I get is Warning: An update to Animated(Pressable) inside a test was not wrapped in act(...).. I tried wrapping many different parts of the test in act, but I wasn't able to get it to work without a warning. The stacktrace involves a file from reanimated (react-native-reanimated/lib/module/mockedRequestAnimationFrame.js), but e.g. example 1 uses tabs and as far as I know by default they don't use any transitions, so I am not sure whether the problem is connected with reanimated.

hey @kligarski would it be possible to create a test repo that i can check? you can share with me on discord and i'll check it as soon as i can.