From 20ff1fb43350f529e9c359a785b1384471bdc003 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Mon, 7 Oct 2024 14:08:07 +0200
Subject: [PATCH 01/25] add missing sections

---
 versioned_docs/version-7.x/testing.md | 155 +++++++++++++++++++++-----
 1 file changed, 128 insertions(+), 27 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 07b86a0e892..ac83a3e59bb 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -25,18 +25,12 @@ If you're using `@react-navigation/stack`, you will only need to mock:
 To add the mocks, create a file `jest/setup.js` (or any other file name of your choice) and paste the following code in it:
 
 ```js
-// include this line for mocking react-native-gesture-handler
+// Include this line for mocking react-native-gesture-handler
 import 'react-native-gesture-handler/jestSetup';
 
-// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated
+// Include this section for mocking react-native-reanimated
 jest.mock('react-native-reanimated', () => {
-  const Reanimated = require('react-native-reanimated/mock');
-
-  // The mock for `call` immediately calls the callback which is incorrect
-  // So we override it with a no-op
-  Reanimated.default.call = () => {};
-
-  return Reanimated;
+  require('react-native-reanimated/mock');
 });
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
@@ -54,53 +48,160 @@ Then we need to use this setup file in our jest config. You can add it under `se
 
 Make sure that the path to the file in `setupFiles` is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks.
 
+If your configuration works correctly, you can skip this section, but in some unusual cases you will need to mock `react-native-screen` as well. To do so add the following code in `jest/setup.js` file:
+
+```js
+// Include this section form mocking react-native-screens
+jest.mock('react-native-screens', () => {
+  // Require actual module instead of a mock
+  let screens = jest.requireActual('react-native-screens');
+
+  // All exports in react-native-screens are getters
+  // We cannot use spread for cloning as it will call the getters
+  // So we need to clone it with Object.create
+  screens = Object.create(
+    Object.getPrototypeOf(screens),
+    Object.getOwnPropertyDescriptors(screens)
+  );
+
+  return screens;
+});
+```
+
 If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.
 
 ## Writing tests
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-Example:
+We are going to write example tests for Root Navigator defined below:
 
-<Tabs groupId="config" queryString="config">
+<Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
-```js name='Testing with jest'
-import * as React from 'react';
-import { screen, render, fireEvent } from '@testing-library/react-native';
-import { createStaticNavigation } from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
+```js
+
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { Button, Text, View } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Profile = ({ navigation }) => {
+  return (
+    <View>
+      <Text>Profile</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
+        title="Navigate to Settings with 10000 ms delay"
+      />
+    </View>
+  );
+};
+
+const Settings = () => {
+  return (
+    <View>
+      <Text>Settings</Text>
+    </View>
+  );
+};
+
+export const RootNavigator = () => {
+  const Stack = createNativeStackNavigator();
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Profile" component={Profile} />
+      <Stack.Screen name="Settings" component={Settings} />
+    </Stack.Navigator>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Test Example:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
 
-const Navigation = createStaticNavigation(RootNavigator);
+```js
+
+```
 
-test('shows profile screen when View Profile is pressed', () => {
-  render(<Navigation />);
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
 
-  fireEvent.press(screen.getByText('View Profile'));
+```js
+import { expect, test } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { RootNavigator } from './RootNavigator';
 
-  expect(screen.getByText('My Profile')).toBeOnTheScreen();
+test('shows settings screen when Navigate to Settings is pressed', () => {
+  render(
+    <NavigationContainer>
+      <RootNavigator />
+    </NavigationContainer>
+  );
+
+  fireEvent.press(screen.getByText('Navigate to Settings'));
+  expect(screen.getByText('Settings')).toBeOnTheScreen();
 });
 ```
 
+</TabItem>
+</Tabs>
+
+For writing tests that include times functions you will need to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
+
+Test Example:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+
+```
+
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name='Testing with jest'
-import * as React from 'react';
-import { screen, render, fireEvent } from '@testing-library/react-native';
+```js
+import { expect, jest, test } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
-test('shows profile screen when View Profile is pressed', () => {
+test('navigates to settings screen after 10000 ms delay', async () => {
+  // Enable fake timers
+  jest.useFakeTimers();
+
   render(
     <NavigationContainer>
       <RootNavigator />
     </NavigationContainer>
   );
 
-  fireEvent.press(screen.getByText('View Profile'));
+  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
+
+  expect(screen.queryByText('Profile')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
+
+  // jest.runAllTimers causes React state updates
+  // So it should be wrapped into act
+  act(() => jest.advanceTimersByTime(10000));
 
-  expect(screen.getByText('My Profile')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
 });
 ```
 

From abfc7b33e566f9ff5b26caabdbbe5435e74cbe2c Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Mon, 7 Oct 2024 14:49:09 +0200
Subject: [PATCH 02/25] add more examples

---
 versioned_docs/version-7.x/testing.md | 105 ++++++++++++++++++++++++--
 1 file changed, 98 insertions(+), 7 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index ac83a3e59bb..6fd753ad262 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -74,7 +74,7 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests for Root Navigator defined below:
+We are going to write example tests illustrating difference between navigate and push functions using Root Navigator defined below:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -98,6 +98,10 @@ const Profile = ({ navigation }) => {
         onPress={() => navigation.navigate('Settings')}
         title="Navigate to Settings"
       />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
       <Button
         onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
         title="Navigate to Settings with 10000 ms delay"
@@ -128,7 +132,7 @@ export const RootNavigator = () => {
 </TabItem>
 </Tabs>
 
-Test Example:
+Navigate function test example:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -146,15 +150,64 @@ import { fireEvent, render, screen } from '@testing-library/react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
-test('shows settings screen when Navigate to Settings is pressed', () => {
+test('navigates to settings screen twice', async () => {
+  const navigation = createNavigationContainerRef();
   render(
-    <NavigationContainer>
+    <NavigationContainer ref={navigation}>
       <RootNavigator />
     </NavigationContainer>
   );
 
-  fireEvent.press(screen.getByText('Navigate to Settings'));
-  expect(screen.getByText('Settings')).toBeOnTheScreen();
+  const button = screen.getByText('Navigate to Settings');
+  fireEvent.press(button);
+  fireEvent.press(button);
+
+  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
+    ['Profile', 'Settings']
+  );
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+</Tabs>
+
+Push function test example:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, test } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { RootNavigator } from './RootNavigator';
+
+test('pushes settings screen twice', async () => {
+  const navigation = createNavigationContainerRef();
+  render(
+    <NavigationContainer ref={navigation}>
+      <RootNavigator />
+    </NavigationContainer>
+  );
+
+  const button = screen.getByText('Push Settings');
+  fireEvent.press(button);
+  fireEvent.press(button);
+
+  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
+    ['Profile', 'Settings', 'Settings']
+  );
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
 });
 ```
 
@@ -163,7 +216,45 @@ test('shows settings screen when Navigate to Settings is pressed', () => {
 
 For writing tests that include times functions you will need to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
 
-Test Example:
+Let's add another button to the Profile screen which uses `setTimeout`:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+const Profile = ({ navigation }) => {
+  return (
+    <View>
+      <Text>Profile</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
+      // Added button
+      <Button
+        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
+        title="Navigate to Settings with 10000 ms delay"
+      />
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Fake timers test example:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>

From 5861eae97968aa5a672ce6e5f78e8dcf82ce1661 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Mon, 7 Oct 2024 15:10:05 +0200
Subject: [PATCH 03/25] clean up

---
 versioned_docs/version-7.x/testing.md | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 6fd753ad262..2ddda12e961 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -48,7 +48,7 @@ Then we need to use this setup file in our jest config. You can add it under `se
 
 Make sure that the path to the file in `setupFiles` is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks.
 
-If your configuration works correctly, you can skip this section, but in some unusual cases you will need to mock `react-native-screen` as well. To do so add the following code in `jest/setup.js` file:
+If your configuration works correctly, you can skip this section, but in some unusual cases you will need to mock `react-native-screens` as well. To do so add the following code in `jest/setup.js` file:
 
 ```js
 // Include this section form mocking react-native-screens
@@ -74,7 +74,7 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating difference between navigate and push functions using Root Navigator defined below:
+We are going to write example tests illustrating the difference between navigate and push functions using Root Navigator defined below:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -147,10 +147,13 @@ Navigate function test example:
 ```js
 import { expect, test } from '@jest/globals';
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
-test('navigates to settings screen twice', async () => {
+test('navigates to settings screen twice', () => {
   const navigation = createNavigationContainerRef();
   render(
     <NavigationContainer ref={navigation}>
@@ -188,10 +191,13 @@ Push function test example:
 ```js
 import { expect, test } from '@jest/globals';
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
-test('pushes settings screen twice', async () => {
+test('pushes settings screen twice', () => {
   const navigation = createNavigationContainerRef();
   render(
     <NavigationContainer ref={navigation}>
@@ -272,7 +278,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
-test('navigates to settings screen after 10000 ms delay', async () => {
+test('navigates to settings screen after 10000 ms delay', () => {
   // Enable fake timers
   jest.useFakeTimers();
 
@@ -287,7 +293,7 @@ test('navigates to settings screen after 10000 ms delay', async () => {
   expect(screen.queryByText('Profile')).toBeOnTheScreen();
   expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
 
-  // jest.runAllTimers causes React state updates
+  // jest.advanceTimersByTime causes React state updates
   // So it should be wrapped into act
   act(() => jest.advanceTimersByTime(10000));
 

From f06232c9dffa33776237d77d6246883a091908ac Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Mon, 7 Oct 2024 15:20:38 +0200
Subject: [PATCH 04/25] add

---
 versioned_docs/version-7.x/testing.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 2ddda12e961..ea802842468 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -74,7 +74,7 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating the difference between navigate and push functions using Root Navigator defined below:
+We are going to write example tests illustrating the difference between `navigate` and `push` functions using Root Navigator defined below:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -132,7 +132,7 @@ export const RootNavigator = () => {
 </TabItem>
 </Tabs>
 
-Navigate function test example:
+`navigate` function test example:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -176,7 +176,7 @@ test('navigates to settings screen twice', () => {
 </TabItem>
 </Tabs>
 
-Push function test example:
+`push` function test example:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>

From ad3821adf33d854098438ed14a017c7f16068a3e Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 10:29:04 +0200
Subject: [PATCH 05/25] add missing static examples, react-native mock

---
 versioned_docs/version-7.x/testing.md | 135 ++++++++++++++++++++++++--
 1 file changed, 126 insertions(+), 9 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index ea802842468..3a747de5ec7 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -48,7 +48,7 @@ Then we need to use this setup file in our jest config. You can add it under `se
 
 Make sure that the path to the file in `setupFiles` is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks.
 
-If your configuration works correctly, you can skip this section, but in some unusual cases you will need to mock `react-native-screens` as well. To do so add the following code in `jest/setup.js` file:
+If your configuration works correctly, you can skip this section, but in some unusual cases you will need to mock `react-native-screens` as well. To add mock of the particular component, e.g. `Screen`, add the following code in `jest/setup.js` file:
 
 ```js
 // Include this section form mocking react-native-screens
@@ -64,6 +64,11 @@ jest.mock('react-native-screens', () => {
     Object.getOwnPropertyDescriptors(screens)
   );
 
+  // Add mock of the Screen component
+  Object.defineProperty(screens, 'Screen', {
+    value: require('react-native').View,
+  });
+
   return screens;
 });
 ```
@@ -74,13 +79,52 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating the difference between `navigate` and `push` functions using Root Navigator defined below:
+We are going to write example tests illustrating the difference between `navigate` and `push` functions using `RootNavigator` defined below:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
+import { Button, Text, View } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  createStaticNavigation,
+  useNavigation,
+} from '@react-navigation/native';
 
+const Profile = () => {
+  const navigation = useNavigation();
+  return (
+    <View>
+      <Text>Profile</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
+    </View>
+  );
+};
+
+const Settings = () => {
+  return (
+    <View>
+      <Text>Settings</Text>
+    </View>
+  );
+};
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Profile,
+    Settings,
+  },
+});
+
+export const RootNavigator = createStaticNavigation(RootStack);
 ```
 
 </TabItem>
@@ -102,10 +146,6 @@ const Profile = ({ navigation }) => {
         onPress={() => navigation.push('Settings')}
         title="Push Settings"
       />
-      <Button
-        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
-        title="Navigate to Settings with 10000 ms delay"
-      />
     </View>
   );
 };
@@ -138,7 +178,25 @@ export const RootNavigator = () => {
 <TabItem value="static" label="Static" default>
 
 ```js
+import { expect, test } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { createNavigationContainerRef } from '@react-navigation/native';
+import { RootNavigator } from './RootNavigator';
+
+test('navigates to settings screen twice', () => {
+  const navigation = createNavigationContainerRef();
+  render(<RootNavigator ref={navigation} />);
 
+  const button = screen.getByText('Navigate to Settings');
+  fireEvent.press(button);
+  fireEvent.press(button);
+
+  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
+    ['Profile', 'Settings']
+  );
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+});
 ```
 
 </TabItem>
@@ -182,7 +240,25 @@ test('navigates to settings screen twice', () => {
 <TabItem value="static" label="Static" default>
 
 ```js
+import { expect, test } from '@jest/globals';
+import { createNavigationContainerRef } from '@react-navigation/native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { RootNavigator } from './RootNavigator';
 
+test('pushes settings screen twice', () => {
+  const navigation = createNavigationContainerRef();
+  render(<RootNavigator ref={navigation} />);
+
+  const button = screen.getByText('Push Settings');
+  fireEvent.press(button);
+  fireEvent.press(button);
+
+  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
+    ['Profile', 'Settings', 'Settings']
+  );
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+});
 ```
 
 </TabItem>
@@ -222,13 +298,33 @@ test('pushes settings screen twice', () => {
 
 For writing tests that include times functions you will need to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
 
-Let's add another button to the Profile screen which uses `setTimeout`:
+Let's add another button to the Profile screen, which uses `setTimeout`:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
-
+const Profile = () => {
+  const navigation = useNavigation();
+  return (
+    <View>
+      <Text>Profile</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
+      {/* Added button */}
+      <Button
+        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
+        title="Navigate to Settings with 10000 ms delay"
+      />
+    </View>
+  );
+};
 ```
 
 </TabItem>
@@ -247,7 +343,7 @@ const Profile = ({ navigation }) => {
         onPress={() => navigation.push('Settings')}
         title="Push Settings"
       />
-      // Added button
+      {/* Added button */}
       <Button
         onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
         title="Navigate to Settings with 10000 ms delay"
@@ -266,7 +362,28 @@ Fake timers test example:
 <TabItem value="static" label="Static" default>
 
 ```js
+import { expect, jest, test } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { RootNavigator } from './RootNavigator';
+
+test('navigates to settings screen after 10000 ms delay', () => {
+  // Enable fake timers
+  jest.useFakeTimers();
 
+  render(<RootNavigator />);
+
+  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
+
+  expect(screen.queryByText('Profile')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
+
+  // jest.advanceTimersByTime causes React state updates
+  // So it should be wrapped into act
+  act(() => jest.advanceTimersByTime(10000));
+
+  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+});
 ```
 
 </TabItem>

From 02e0b0eebfb84ee0255b348b4611fa186cd190de Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 11:21:31 +0200
Subject: [PATCH 06/25] update fake timers test

---
 versioned_docs/version-7.x/testing.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 3a747de5ec7..820902522fa 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -374,12 +374,14 @@ test('navigates to settings screen after 10000 ms delay', () => {
 
   fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
 
+  // jest.advanceTimersByTime causes React state updates
+  // So it should be wrapped into act
+  act(() => jest.advanceTimersByTime(5000));
+
   expect(screen.queryByText('Profile')).toBeOnTheScreen();
   expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
 
-  // jest.advanceTimersByTime causes React state updates
-  // So it should be wrapped into act
-  act(() => jest.advanceTimersByTime(10000));
+  act(() => jest.advanceTimersByTime(5000));
 
   expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
   expect(screen.queryByText('Settings')).toBeOnTheScreen();
@@ -407,12 +409,14 @@ test('navigates to settings screen after 10000 ms delay', () => {
 
   fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
 
+  // jest.advanceTimersByTime causes React state updates
+  // So it should be wrapped into act
+  act(() => jest.advanceTimersByTime(5000));
+
   expect(screen.queryByText('Profile')).toBeOnTheScreen();
   expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
 
-  // jest.advanceTimersByTime causes React state updates
-  // So it should be wrapped into act
-  act(() => jest.advanceTimersByTime(10000));
+  act(() => jest.advanceTimersByTime(5000));
 
   expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
   expect(screen.queryByText('Settings')).toBeOnTheScreen();

From c8e9a0ccf064c517821e84b81e192b107a3087fe Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 14:31:40 +0200
Subject: [PATCH 07/25] move create static navigation

---
 versioned_docs/version-7.x/testing.md | 29 ++++++++++++++++-----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 820902522fa..249bf9885e6 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -87,10 +87,7 @@ We are going to write example tests illustrating the difference between `navigat
 ```js
 import { Button, Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import {
-  createStaticNavigation,
-  useNavigation,
-} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 
 const Profile = () => {
   const navigation = useNavigation();
@@ -117,14 +114,12 @@ const Settings = () => {
   );
 };
 
-const RootStack = createNativeStackNavigator({
+export const RootNavigator = createNativeStackNavigator({
   screens: {
     Profile,
     Settings,
   },
 });
-
-export const RootNavigator = createStaticNavigation(RootStack);
 ```
 
 </TabItem>
@@ -180,12 +175,16 @@ export const RootNavigator = () => {
 ```js
 import { expect, test } from '@jest/globals';
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import { createNavigationContainerRef } from '@react-navigation/native';
+import {
+  createNavigationContainerRef,
+  createStaticNavigation,
+} from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
 test('navigates to settings screen twice', () => {
+  const RootNavigation = createStaticNavigation(RootNavigator);
   const navigation = createNavigationContainerRef();
-  render(<RootNavigator ref={navigation} />);
+  render(<RootNavigation ref={navigation} />);
 
   const button = screen.getByText('Navigate to Settings');
   fireEvent.press(button);
@@ -241,13 +240,17 @@ test('navigates to settings screen twice', () => {
 
 ```js
 import { expect, test } from '@jest/globals';
-import { createNavigationContainerRef } from '@react-navigation/native';
+import {
+  createNavigationContainerRef,
+  createStaticNavigation,
+} from '@react-navigation/native';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import { RootNavigator } from './RootNavigator';
 
 test('pushes settings screen twice', () => {
+  const RootNavigation = createStaticNavigation(RootNavigator);
   const navigation = createNavigationContainerRef();
-  render(<RootNavigator ref={navigation} />);
+  render(<RootNavigation ref={navigation} />);
 
   const button = screen.getByText('Push Settings');
   fireEvent.press(button);
@@ -364,13 +367,15 @@ Fake timers test example:
 ```js
 import { expect, jest, test } from '@jest/globals';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { createStaticNavigation } from '@react-navigation/native';
 import { RootNavigator } from './RootNavigator';
 
 test('navigates to settings screen after 10000 ms delay', () => {
   // Enable fake timers
   jest.useFakeTimers();
 
-  render(<RootNavigator />);
+  const RootNavigation = createStaticNavigation(RootNavigator);
+  render(<RootNavigation />);
 
   fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
 

From 8f4fd6faf7b1571b031cac512255d515ff246bf6 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 15:25:36 +0200
Subject: [PATCH 08/25] add preload test

---
 versioned_docs/version-7.x/testing.md | 283 +++++++++++++++++++++++++-
 1 file changed, 282 insertions(+), 1 deletion(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 249bf9885e6..9d4964df6b2 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,7 +79,9 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating the difference between `navigate` and `push` functions using `RootNavigator` defined below:
+We are going to write example tests illustrating the difference between `navigate` and `push` functions, drawer's screens `preload` and times functions in tests.
+
+To show the difference between `navigate` and `push` functions, we will use `RootNavigator` defined below:
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -299,6 +301,285 @@ test('pushes settings screen twice', () => {
 </TabItem>
 </Tabs>
 
+To show how drawer's screens `preload` works, we will compare two tests - with and without preloading.
+
+Without preloading test example:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, test } from '@jest/globals';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  createNavigationContainerRef,
+  createStaticNavigation,
+  useNavigation,
+} from '@react-navigation/native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { Button, Text, View } from 'react-native';
+
+const Profile = () => {
+  const navigation = useNavigation();
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+    </View>
+  );
+};
+
+let renderCounter = 0;
+
+const Settings = () => {
+  renderCounter++;
+  return (
+    <View>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+const Drawer = createDrawerNavigator({
+  screens: {
+    Profile,
+    Settings,
+  },
+});
+
+const DrawerNavigation = createStaticNavigation(Drawer);
+
+test('navigates to settings without previous preload', () => {
+  const navigation = createNavigationContainerRef();
+  render(<DrawerNavigation ref={navigation} />);
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+  expect(renderCounter).toBe(0);
+
+  fireEvent.press(screen.queryByText('Navigate to Settings'));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, test } from '@jest/globals';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { Button, Text, View } from 'react-native';
+
+const Profile = ({ navigation }) => {
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+    </View>
+  );
+};
+
+let renderCounter = 0;
+
+const Settings = () => {
+  renderCounter++;
+  return (
+    <View>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+const Drawer = createDrawerNavigator();
+
+const DrawerNavigation = () => {
+  return (
+    <Drawer.Navigator>
+      <Drawer.Screen name="Profile" component={Profile} />
+      <Drawer.Screen name="Settings" component={Settings} />
+    </Drawer.Navigator>
+  );
+};
+
+test('navigates to settings without previous preload', () => {
+  const navigation = createNavigationContainerRef();
+  render(
+    <NavigationContainer ref={navigation}>
+      <DrawerNavigation />
+    </NavigationContainer>
+  );
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+  expect(renderCounter).toBe(0);
+
+  fireEvent.press(screen.queryByText('Navigate to Settings'));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+});
+```
+
+</TabItem>
+</Tabs>
+
+With preloading test example:
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, test } from '@jest/globals';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  createNavigationContainerRef,
+  createStaticNavigation,
+  useNavigation,
+} from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { Button, Text, View } from 'react-native';
+
+const Profile = () => {
+  const navigation = useNavigation();
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+    </View>
+  );
+};
+
+let renderCounter = 0;
+
+const Settings = () => {
+  renderCounter++;
+  return (
+    <View>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+const Drawer = createDrawerNavigator({
+  screens: {
+    Profile,
+    Settings,
+  },
+});
+
+const DrawerNavigation = createStaticNavigation(Drawer);
+
+test('navigates to settings with previous preload', () => {
+  const navigation = createNavigationContainerRef();
+  render(<DrawerNavigation ref={navigation} />);
+
+  expect(renderCounter).toBe(0);
+
+  act(() => navigation.preload('Settings'));
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+
+  fireEvent.press(screen.queryByText('Navigate to Settings'));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, test } from '@jest/globals';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { Button, Text, View } from 'react-native';
+
+const Profile = ({ navigation }) => {
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+    </View>
+  );
+};
+
+let renderCounter = 0;
+
+const Settings = () => {
+  renderCounter++;
+  return (
+    <View>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+const Drawer = createDrawerNavigator();
+
+const DrawerNavigation = () => {
+  return (
+    <Drawer.Navigator>
+      <Drawer.Screen name="Profile" component={Profile} />
+      <Drawer.Screen name="Settings" component={Settings} />
+    </Drawer.Navigator>
+  );
+};
+
+test('navigates to settings with previous preload', () => {
+  const navigation = createNavigationContainerRef();
+  render(
+    <NavigationContainer ref={navigation}>
+      <DrawerNavigation />
+    </NavigationContainer>
+  );
+
+  expect(renderCounter).toBe(0);
+
+  act(() => navigation.preload('Settings'));
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+
+  fireEvent.press(screen.queryByText('Navigate to Settings'));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+  expect(renderCounter).toBe(1);
+});
+```
+
+</TabItem>
+</Tabs>
+
 For writing tests that include times functions you will need to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
 
 Let's add another button to the Profile screen, which uses `setTimeout`:

From d41d94771663a86588163832f6d3daae79212d66 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 17:45:04 +0200
Subject: [PATCH 09/25] add comments

---
 versioned_docs/version-7.x/testing.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 9d4964df6b2..04170b0ac27 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -492,6 +492,8 @@ test('navigates to settings with previous preload', () => {
 
   expect(renderCounter).toBe(0);
 
+  // navigate.preload causes React state updates
+  // So it should be wrapped into act
   act(() => navigation.preload('Settings'));
 
   expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
@@ -563,6 +565,8 @@ test('navigates to settings with previous preload', () => {
 
   expect(renderCounter).toBe(0);
 
+  // navigation.preload causes React state updates
+  // So it should be wrapped into act
   act(() => navigation.preload('Settings'));
 
   expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();

From 7121450e8af90d19864ac45a05275ba668c2da22 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 17:54:12 +0200
Subject: [PATCH 10/25] make screen titles consistent

---
 versioned_docs/version-7.x/testing.md | 44 +++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 04170b0ac27..adf8bb60a30 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -95,7 +95,7 @@ const Profile = () => {
   const navigation = useNavigation();
   return (
     <View>
-      <Text>Profile</Text>
+      <Text>Profile Screen</Text>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Navigate to Settings"
@@ -111,7 +111,7 @@ const Profile = () => {
 const Settings = () => {
   return (
     <View>
-      <Text>Settings</Text>
+      <Text>Settings Screen</Text>
     </View>
   );
 };
@@ -134,7 +134,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 const Profile = ({ navigation }) => {
   return (
     <View>
-      <Text>Profile</Text>
+      <Text>Profile Screen</Text>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Navigate to Settings"
@@ -150,7 +150,7 @@ const Profile = ({ navigation }) => {
 const Settings = () => {
   return (
     <View>
-      <Text>Settings</Text>
+      <Text>Settings Screen</Text>
     </View>
   );
 };
@@ -195,8 +195,8 @@ test('navigates to settings screen twice', () => {
   expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
     ['Profile', 'Settings']
   );
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 
@@ -227,8 +227,8 @@ test('navigates to settings screen twice', () => {
   expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
     ['Profile', 'Settings']
   );
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 
@@ -261,8 +261,8 @@ test('pushes settings screen twice', () => {
   expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
     ['Profile', 'Settings', 'Settings']
   );
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 
@@ -293,8 +293,8 @@ test('pushes settings screen twice', () => {
   expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
     ['Profile', 'Settings', 'Settings']
   );
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 
@@ -596,7 +596,7 @@ const Profile = () => {
   const navigation = useNavigation();
   return (
     <View>
-      <Text>Profile</Text>
+      <Text>Profile Screen</Text>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Navigate to Settings"
@@ -622,7 +622,7 @@ const Profile = () => {
 const Profile = ({ navigation }) => {
   return (
     <View>
-      <Text>Profile</Text>
+      <Text>Profile Screen</Text>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Navigate to Settings"
@@ -668,13 +668,13 @@ test('navigates to settings screen after 10000 ms delay', () => {
   // So it should be wrapped into act
   act(() => jest.advanceTimersByTime(5000));
 
-  expect(screen.queryByText('Profile')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
 
   act(() => jest.advanceTimersByTime(5000));
 
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 
@@ -703,13 +703,13 @@ test('navigates to settings screen after 10000 ms delay', () => {
   // So it should be wrapped into act
   act(() => jest.advanceTimersByTime(5000));
 
-  expect(screen.queryByText('Profile')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
 
   act(() => jest.advanceTimersByTime(5000));
 
-  expect(screen.queryByText('Profile')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings')).toBeOnTheScreen();
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
 });
 ```
 

From 4df7263f5a9c83fe0739699d46e2800791dd4c83 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 9 Oct 2024 18:12:59 +0200
Subject: [PATCH 11/25] correct text

---
 versioned_docs/version-7.x/testing.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index adf8bb60a30..8f2cb86f945 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,7 +79,8 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating the difference between `navigate` and `push` functions, drawer's screens `preload` and times functions in tests.
+We are going to write example tests illustrating the difference between `navigate` and `push` functions, how drawer's screens `preload`
+works and what you have to do to use times functions in tests.
 
 To show the difference between `navigate` and `push` functions, we will use `RootNavigator` defined below:
 
@@ -439,6 +440,7 @@ test('navigates to settings without previous preload', () => {
 </Tabs>
 
 With preloading test example:
+
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
@@ -584,7 +586,7 @@ test('navigates to settings with previous preload', () => {
 </TabItem>
 </Tabs>
 
-For writing tests that include times functions you will need to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
+For writing tests that include times functions we will have to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
 
 Let's add another button to the Profile screen, which uses `setTimeout`:
 

From f293b0c1774af7fa35210e7cfdebac6730bd4b22 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 10 Oct 2024 09:40:35 +0200
Subject: [PATCH 12/25] add screen to screen component name

---
 versioned_docs/version-7.x/testing.md | 52 +++++++++++++--------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 8f2cb86f945..d7c957f9bbc 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -92,7 +92,7 @@ import { Button, Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
 
-const Profile = () => {
+const ProfileScreen = () => {
   const navigation = useNavigation();
   return (
     <View>
@@ -109,7 +109,7 @@ const Profile = () => {
   );
 };
 
-const Settings = () => {
+const SettingsScreen = () => {
   return (
     <View>
       <Text>Settings Screen</Text>
@@ -119,8 +119,8 @@ const Settings = () => {
 
 export const RootNavigator = createNativeStackNavigator({
   screens: {
-    Profile,
-    Settings,
+    Profile: ProfileScreen,
+    Settings: SettingsScreen,
   },
 });
 ```
@@ -132,7 +132,7 @@ export const RootNavigator = createNativeStackNavigator({
 import { Button, Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-const Profile = ({ navigation }) => {
+const ProfileScreen = ({ navigation }) => {
   return (
     <View>
       <Text>Profile Screen</Text>
@@ -148,7 +148,7 @@ const Profile = ({ navigation }) => {
   );
 };
 
-const Settings = () => {
+const SettingsScreen = () => {
   return (
     <View>
       <Text>Settings Screen</Text>
@@ -160,8 +160,8 @@ export const RootNavigator = () => {
   const Stack = createNativeStackNavigator();
   return (
     <Stack.Navigator>
-      <Stack.Screen name="Profile" component={Profile} />
-      <Stack.Screen name="Settings" component={Settings} />
+      <Stack.Screen name="Profile" component={ProfileScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
     </Stack.Navigator>
   );
 };
@@ -320,7 +320,7 @@ import {
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 
-const Profile = () => {
+const ProfileScreen = () => {
   const navigation = useNavigation();
   return (
     <View>
@@ -335,7 +335,7 @@ const Profile = () => {
 
 let renderCounter = 0;
 
-const Settings = () => {
+const SettingsScreen = () => {
   renderCounter++;
   return (
     <View>
@@ -346,8 +346,8 @@ const Settings = () => {
 
 const Drawer = createDrawerNavigator({
   screens: {
-    Profile,
-    Settings,
+    Profile: ProfileScreen,
+    Settings: SettingsScreen,
   },
 });
 
@@ -382,7 +382,7 @@ import {
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 
-const Profile = ({ navigation }) => {
+const ProfileScreen = ({ navigation }) => {
   return (
     <View>
       <Text>Profile Screen</Text>
@@ -396,7 +396,7 @@ const Profile = ({ navigation }) => {
 
 let renderCounter = 0;
 
-const Settings = () => {
+const SettingsScreen = () => {
   renderCounter++;
   return (
     <View>
@@ -410,8 +410,8 @@ const Drawer = createDrawerNavigator();
 const DrawerNavigation = () => {
   return (
     <Drawer.Navigator>
-      <Drawer.Screen name="Profile" component={Profile} />
-      <Drawer.Screen name="Settings" component={Settings} />
+      <Drawer.Screen name="Profile" component={ProfileScreen} />
+      <Drawer.Screen name="Settings" component={SettingsScreen} />
     </Drawer.Navigator>
   );
 };
@@ -455,7 +455,7 @@ import {
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 
-const Profile = () => {
+const ProfileScreen = () => {
   const navigation = useNavigation();
   return (
     <View>
@@ -470,7 +470,7 @@ const Profile = () => {
 
 let renderCounter = 0;
 
-const Settings = () => {
+const SettingsScreen = () => {
   renderCounter++;
   return (
     <View>
@@ -481,8 +481,8 @@ const Settings = () => {
 
 const Drawer = createDrawerNavigator({
   screens: {
-    Profile,
-    Settings,
+    Profile: ProfileScreen,
+    Settings: SettingsScreen,
   },
 });
 
@@ -523,7 +523,7 @@ import {
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 
-const Profile = ({ navigation }) => {
+const ProfileScreen = ({ navigation }) => {
   return (
     <View>
       <Text>Profile Screen</Text>
@@ -537,7 +537,7 @@ const Profile = ({ navigation }) => {
 
 let renderCounter = 0;
 
-const Settings = () => {
+const SettingsScreen = () => {
   renderCounter++;
   return (
     <View>
@@ -551,8 +551,8 @@ const Drawer = createDrawerNavigator();
 const DrawerNavigation = () => {
   return (
     <Drawer.Navigator>
-      <Drawer.Screen name="Profile" component={Profile} />
-      <Drawer.Screen name="Settings" component={Settings} />
+      <Drawer.Screen name="Profile" component={ProfileScreen} />
+      <Drawer.Screen name="Settings" component={SettingsScreen} />
     </Drawer.Navigator>
   );
 };
@@ -594,7 +594,7 @@ Let's add another button to the Profile screen, which uses `setTimeout`:
 <TabItem value="static" label="Static" default>
 
 ```js
-const Profile = () => {
+const ProfileScreen = () => {
   const navigation = useNavigation();
   return (
     <View>
@@ -621,7 +621,7 @@ const Profile = () => {
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
-const Profile = ({ navigation }) => {
+const ProfileScreen = ({ navigation }) => {
   return (
     <View>
       <Text>Profile Screen</Text>

From d20e90523b3a2c912b48837fb276739f7c8a2996 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 10 Oct 2024 10:51:45 +0200
Subject: [PATCH 13/25] delete unnecessary prop

---
 versioned_docs/version-7.x/testing.md | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index d7c957f9bbc..904dc0ba025 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -313,7 +313,6 @@ Without preloading test example:
 import { expect, test } from '@jest/globals';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
-  createNavigationContainerRef,
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
@@ -354,8 +353,7 @@ const Drawer = createDrawerNavigator({
 const DrawerNavigation = createStaticNavigation(Drawer);
 
 test('navigates to settings without previous preload', () => {
-  const navigation = createNavigationContainerRef();
-  render(<DrawerNavigation ref={navigation} />);
+  render(<DrawerNavigation />);
 
   expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
   expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
@@ -375,10 +373,7 @@ test('navigates to settings without previous preload', () => {
 ```js
 import { expect, test } from '@jest/globals';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import {
-  createNavigationContainerRef,
-  NavigationContainer,
-} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import { Button, Text, View } from 'react-native';
 
@@ -417,9 +412,8 @@ const DrawerNavigation = () => {
 };
 
 test('navigates to settings without previous preload', () => {
-  const navigation = createNavigationContainerRef();
   render(
-    <NavigationContainer ref={navigation}>
+    <NavigationContainer>
       <DrawerNavigation />
     </NavigationContainer>
   );

From c7e6b6a7a54832a1a06a6f8a8289c2ce7ec9cfb1 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 10 Oct 2024 11:46:33 +0200
Subject: [PATCH 14/25] change tests order

---
 versioned_docs/version-7.x/testing.md | 262 +++++++++++++-------------
 1 file changed, 130 insertions(+), 132 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 904dc0ba025..2724a74fa71 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -302,6 +302,136 @@ test('pushes settings screen twice', () => {
 </TabItem>
 </Tabs>
 
+For writing tests that include times functions we will have to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
+
+Let's add another button, which uses `setTimeout`, to the previously defined `Profile` screen:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+const ProfileScreen = () => {
+  const navigation = useNavigation();
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
+      {/* Added button */}
+      <Button
+        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
+        title="Navigate to Settings with 10000 ms delay"
+      />
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+const ProfileScreen = ({ navigation }) => {
+  return (
+    <View>
+      <Text>Profile Screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Navigate to Settings"
+      />
+      <Button
+        onPress={() => navigation.push('Settings')}
+        title="Push Settings"
+      />
+      {/* Added button */}
+      <Button
+        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
+        title="Navigate to Settings with 10000 ms delay"
+      />
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Fake timers test example:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { RootNavigator } from './RootNavigator';
+
+test('navigates to settings screen after 10000 ms delay', () => {
+  // Enable fake timers
+  jest.useFakeTimers();
+
+  const RootNavigation = createStaticNavigation(RootNavigator);
+  render(<RootNavigation />);
+
+  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
+
+  act(() => jest.advanceTimersByTime(5000));
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+
+  act(() => jest.advanceTimersByTime(5000));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { RootNavigator } from './RootNavigator';
+
+test('navigates to settings screen after 10000 ms delay', () => {
+  // Enable fake timers
+  jest.useFakeTimers();
+
+  render(
+    <NavigationContainer>
+      <RootNavigator />
+    </NavigationContainer>
+  );
+
+  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
+
+  // jest.advanceTimersByTime causes React state updates
+  // So it should be wrapped into act
+  act(() => jest.advanceTimersByTime(5000));
+
+  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
+
+  act(() => jest.advanceTimersByTime(5000));
+
+  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+</Tabs>
+
 To show how drawer's screens `preload` works, we will compare two tests - with and without preloading.
 
 Without preloading test example:
@@ -580,138 +710,6 @@ test('navigates to settings with previous preload', () => {
 </TabItem>
 </Tabs>
 
-For writing tests that include times functions we will have to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
-
-Let's add another button to the Profile screen, which uses `setTimeout`:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-const ProfileScreen = () => {
-  const navigation = useNavigation();
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-      {/* Added button */}
-      <Button
-        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
-        title="Navigate to Settings with 10000 ms delay"
-      />
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-const ProfileScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-      {/* Added button */}
-      <Button
-        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
-        title="Navigate to Settings with 10000 ms delay"
-      />
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Fake timers test example:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { expect, jest, test } from '@jest/globals';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { createStaticNavigation } from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen after 10000 ms delay', () => {
-  // Enable fake timers
-  jest.useFakeTimers();
-
-  const RootNavigation = createStaticNavigation(RootNavigator);
-  render(<RootNavigation />);
-
-  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
-
-  // jest.advanceTimersByTime causes React state updates
-  // So it should be wrapped into act
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, jest, test } from '@jest/globals';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen after 10000 ms delay', () => {
-  // Enable fake timers
-  jest.useFakeTimers();
-
-  render(
-    <NavigationContainer>
-      <RootNavigator />
-    </NavigationContainer>
-  );
-
-  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
-
-  // jest.advanceTimersByTime causes React state updates
-  // So it should be wrapped into act
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-</Tabs>
-
 ## Best practices
 
 There are a couple of things to keep in mind when writing tests for components using React Navigation:

From 88a6e02b8a9c3310ee49ad629aebf30d703a34f9 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Mon, 14 Oct 2024 09:18:59 +0200
Subject: [PATCH 15/25] fix missing return statement

---
 versioned_docs/version-7.x/testing.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 2724a74fa71..d2df3b67c6a 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -29,9 +29,9 @@ To add the mocks, create a file `jest/setup.js` (or any other file name of your
 import 'react-native-gesture-handler/jestSetup';
 
 // Include this section for mocking react-native-reanimated
-jest.mock('react-native-reanimated', () => {
-  require('react-native-reanimated/mock');
-});
+jest.mock('react-native-reanimated', () =>
+  require('react-native-reanimated/mock')
+);
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

From 9f02dd3ad97111193735dc4115ed5d195ad477d3 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Wed, 16 Oct 2024 15:54:40 +0200
Subject: [PATCH 16/25] delete previous tests

---
 versioned_docs/version-7.x/testing.md | 614 --------------------------
 1 file changed, 614 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index d2df3b67c6a..19fee95d5d7 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,632 +79,18 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We are going to write example tests illustrating the difference between `navigate` and `push` functions, how drawer's screens `preload`
-works and what you have to do to use times functions in tests.
-
-To show the difference between `navigate` and `push` functions, we will use `RootNavigator` defined below:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { Button, Text, View } from 'react-native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { useNavigation } from '@react-navigation/native';
-
-const ProfileScreen = () => {
-  const navigation = useNavigation();
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-    </View>
-  );
-};
-
-const SettingsScreen = () => {
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-export const RootNavigator = createNativeStackNavigator({
-  screens: {
-    Profile: ProfileScreen,
-    Settings: SettingsScreen,
-  },
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { Button, Text, View } from 'react-native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
-const ProfileScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-    </View>
-  );
-};
-
-const SettingsScreen = () => {
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-export const RootNavigator = () => {
-  const Stack = createNativeStackNavigator();
-  return (
-    <Stack.Navigator>
-      <Stack.Screen name="Profile" component={ProfileScreen} />
-      <Stack.Screen name="Settings" component={SettingsScreen} />
-    </Stack.Navigator>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-`navigate` function test example:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { expect, test } from '@jest/globals';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import {
-  createNavigationContainerRef,
-  createStaticNavigation,
-} from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen twice', () => {
-  const RootNavigation = createStaticNavigation(RootNavigator);
-  const navigation = createNavigationContainerRef();
-  render(<RootNavigation ref={navigation} />);
-
-  const button = screen.getByText('Navigate to Settings');
-  fireEvent.press(button);
-  fireEvent.press(button);
-
-  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
-    ['Profile', 'Settings']
-  );
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, test } from '@jest/globals';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import {
-  createNavigationContainerRef,
-  NavigationContainer,
-} from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen twice', () => {
-  const navigation = createNavigationContainerRef();
-  render(
-    <NavigationContainer ref={navigation}>
-      <RootNavigator />
-    </NavigationContainer>
-  );
-
-  const button = screen.getByText('Navigate to Settings');
-  fireEvent.press(button);
-  fireEvent.press(button);
-
-  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
-    ['Profile', 'Settings']
-  );
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-</Tabs>
-
-`push` function test example:
-
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
-import { expect, test } from '@jest/globals';
-import {
-  createNavigationContainerRef,
-  createStaticNavigation,
-} from '@react-navigation/native';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import { RootNavigator } from './RootNavigator';
-
-test('pushes settings screen twice', () => {
-  const RootNavigation = createStaticNavigation(RootNavigator);
-  const navigation = createNavigationContainerRef();
-  render(<RootNavigation ref={navigation} />);
-
-  const button = screen.getByText('Push Settings');
-  fireEvent.press(button);
-  fireEvent.press(button);
-
-  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
-    ['Profile', 'Settings', 'Settings']
-  );
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, test } from '@jest/globals';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import {
-  createNavigationContainerRef,
-  NavigationContainer,
-} from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('pushes settings screen twice', () => {
-  const navigation = createNavigationContainerRef();
-  render(
-    <NavigationContainer ref={navigation}>
-      <RootNavigator />
-    </NavigationContainer>
-  );
-
-  const button = screen.getByText('Push Settings');
-  fireEvent.press(button);
-  fireEvent.press(button);
-
-  expect(navigation.getState().routes.map((route) => route.name)).toStrictEqual(
-    ['Profile', 'Settings', 'Settings']
-  );
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-</Tabs>
-
-For writing tests that include times functions we will have to use [Fake Timers](https://jestjs.io/docs/timer-mocks). They will replace times function implementation to use time from the fake clock.
-
-Let's add another button, which uses `setTimeout`, to the previously defined `Profile` screen:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
 
-```js
-const ProfileScreen = () => {
-  const navigation = useNavigation();
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-      {/* Added button */}
-      <Button
-        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
-        title="Navigate to Settings with 10000 ms delay"
-      />
-    </View>
-  );
-};
 ```
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
-const ProfileScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-      <Button
-        onPress={() => navigation.push('Settings')}
-        title="Push Settings"
-      />
-      {/* Added button */}
-      <Button
-        onPress={() => setTimeout(() => navigation.navigate('Settings'), 10000)}
-        title="Navigate to Settings with 10000 ms delay"
-      />
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Fake timers test example:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { expect, jest, test } from '@jest/globals';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { createStaticNavigation } from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen after 10000 ms delay', () => {
-  // Enable fake timers
-  jest.useFakeTimers();
-
-  const RootNavigation = createStaticNavigation(RootNavigator);
-  render(<RootNavigation />);
-
-  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
-
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
 
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, jest, test } from '@jest/globals';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { RootNavigator } from './RootNavigator';
-
-test('navigates to settings screen after 10000 ms delay', () => {
-  // Enable fake timers
-  jest.useFakeTimers();
-
-  render(
-    <NavigationContainer>
-      <RootNavigator />
-    </NavigationContainer>
-  );
-
-  fireEvent.press(screen.getByText('Navigate to Settings with 10000 ms delay'));
-
-  // jest.advanceTimersByTime causes React state updates
-  // So it should be wrapped into act
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-
-  act(() => jest.advanceTimersByTime(5000));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-});
-```
-
-</TabItem>
-</Tabs>
-
-To show how drawer's screens `preload` works, we will compare two tests - with and without preloading.
-
-Without preloading test example:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { expect, test } from '@jest/globals';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import {
-  createStaticNavigation,
-  useNavigation,
-} from '@react-navigation/native';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import { Button, Text, View } from 'react-native';
-
-const ProfileScreen = () => {
-  const navigation = useNavigation();
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-    </View>
-  );
-};
-
-let renderCounter = 0;
-
-const SettingsScreen = () => {
-  renderCounter++;
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-const Drawer = createDrawerNavigator({
-  screens: {
-    Profile: ProfileScreen,
-    Settings: SettingsScreen,
-  },
-});
-
-const DrawerNavigation = createStaticNavigation(Drawer);
-
-test('navigates to settings without previous preload', () => {
-  render(<DrawerNavigation />);
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-  expect(renderCounter).toBe(0);
-
-  fireEvent.press(screen.queryByText('Navigate to Settings'));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, test } from '@jest/globals';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
-import { fireEvent, render, screen } from '@testing-library/react-native';
-import { Button, Text, View } from 'react-native';
-
-const ProfileScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-    </View>
-  );
-};
-
-let renderCounter = 0;
-
-const SettingsScreen = () => {
-  renderCounter++;
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-const Drawer = createDrawerNavigator();
-
-const DrawerNavigation = () => {
-  return (
-    <Drawer.Navigator>
-      <Drawer.Screen name="Profile" component={ProfileScreen} />
-      <Drawer.Screen name="Settings" component={SettingsScreen} />
-    </Drawer.Navigator>
-  );
-};
-
-test('navigates to settings without previous preload', () => {
-  render(
-    <NavigationContainer>
-      <DrawerNavigation />
-    </NavigationContainer>
-  );
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-  expect(renderCounter).toBe(0);
-
-  fireEvent.press(screen.queryByText('Navigate to Settings'));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-});
-```
-
-</TabItem>
-</Tabs>
-
-With preloading test example:
-
-<Tabs groupId="example" queryString="example">
-<TabItem value="static" label="Static" default>
-
-```js
-import { expect, test } from '@jest/globals';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import {
-  createNavigationContainerRef,
-  createStaticNavigation,
-  useNavigation,
-} from '@react-navigation/native';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { Button, Text, View } from 'react-native';
-
-const ProfileScreen = () => {
-  const navigation = useNavigation();
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-    </View>
-  );
-};
-
-let renderCounter = 0;
-
-const SettingsScreen = () => {
-  renderCounter++;
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-const Drawer = createDrawerNavigator({
-  screens: {
-    Profile: ProfileScreen,
-    Settings: SettingsScreen,
-  },
-});
-
-const DrawerNavigation = createStaticNavigation(Drawer);
-
-test('navigates to settings with previous preload', () => {
-  const navigation = createNavigationContainerRef();
-  render(<DrawerNavigation ref={navigation} />);
-
-  expect(renderCounter).toBe(0);
-
-  // navigate.preload causes React state updates
-  // So it should be wrapped into act
-  act(() => navigation.preload('Settings'));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-
-  fireEvent.press(screen.queryByText('Navigate to Settings'));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-});
-```
-
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-import { expect, test } from '@jest/globals';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import {
-  createNavigationContainerRef,
-  NavigationContainer,
-} from '@react-navigation/native';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { Button, Text, View } from 'react-native';
-
-const ProfileScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>Profile Screen</Text>
-      <Button
-        onPress={() => navigation.navigate('Settings')}
-        title="Navigate to Settings"
-      />
-    </View>
-  );
-};
-
-let renderCounter = 0;
-
-const SettingsScreen = () => {
-  renderCounter++;
-  return (
-    <View>
-      <Text>Settings Screen</Text>
-    </View>
-  );
-};
-
-const Drawer = createDrawerNavigator();
-
-const DrawerNavigation = () => {
-  return (
-    <Drawer.Navigator>
-      <Drawer.Screen name="Profile" component={ProfileScreen} />
-      <Drawer.Screen name="Settings" component={SettingsScreen} />
-    </Drawer.Navigator>
-  );
-};
-
-test('navigates to settings with previous preload', () => {
-  const navigation = createNavigationContainerRef();
-  render(
-    <NavigationContainer ref={navigation}>
-      <DrawerNavigation />
-    </NavigationContainer>
-  );
-
-  expect(renderCounter).toBe(0);
-
-  // navigation.preload causes React state updates
-  // So it should be wrapped into act
-  act(() => navigation.preload('Settings'));
-
-  expect(screen.queryByText('Profile Screen')).toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).not.toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-
-  fireEvent.press(screen.queryByText('Navigate to Settings'));
-
-  expect(screen.queryByText('Profile Screen')).not.toBeOnTheScreen();
-  expect(screen.queryByText('Settings Screen')).toBeOnTheScreen();
-  expect(renderCounter).toBe(1);
-});
 ```
 
 </TabItem>

From 6039c03159c9739286b98367b82f424db8f13f11 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 11:09:54 +0200
Subject: [PATCH 17/25] init text

---
 versioned_docs/version-7.x/testing.md | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 19fee95d5d7..3c7b0a298f0 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,6 +79,12 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
+We will go through some real-world case test code examples. Each code example consist of navigator and test code file.
+
+### Example 1
+
+Navigate to another screen by button press.
+
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
@@ -96,6 +102,34 @@ We recommend using [React Native Testing Library](https://callstack.github.io/re
 </TabItem>
 </Tabs>
 
+We simulate user’s button press by `FireEvent` and call `expect` to check if rendered content is correct.
+
+### Example 2
+
+Navigate to another tab caused by tab bar button press.
+
+We use `id` to query for tab buttons, simulate button press by `FireEvent` and check if rendered content is correct.
+
+To setup tab `id` you need to add `tabBarButtonTestID` in settings tab screen `options` defined in `TabNavigator`.
+
+Bottom tabs bar buttons `handlePress` function expects `GestureResponderEvent`. To avoid error you should pass `event` object as the second argument of `fireEvent`.
+
+Sometimes navigation animations need some time to finish and render screen's content. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time and avoid getting state change error.
+
+### Example 3
+
+Always display first screen of the settings stack nested in tab after settings stack tab focus.
+
+We query tab buttons, simulating button presses and check if rendered screens are correct.
+
+### Example 4
+
+Display loading state while waiting for data and then fetched nick on every profile screen focus.
+
+We query bottoms tabs buttons and mock fetch function using `spyOn` and `mockImplementation`. Then, we navigate to profile screen and checks if loading state displays correctly. To check if fetched data is displayed we add `await` to query - we need to wait for the fetch to finish before checking if fetched data is correct. To ensure that operation will succeed on every focus, we cause it again by navigating back to home, again to settings and check rendered content again.
+
+It a good practice to use mocks while testing API functions. `mockedFetch` will override real implementation of fetch and enable us to make test deterministic. Thanks to `spyOnYou` you can check if mocked function was called using `toHaveBeenCalled` assertion.
+
 ## Best practices
 
 There are a couple of things to keep in mind when writing tests for components using React Navigation:

From b18291a6d98dbc3b677b0596a1e3ecd0451a0a5d Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 11:17:39 +0200
Subject: [PATCH 18/25] add code

---
 versioned_docs/version-7.x/testing.md | 774 ++++++++++++++++++++++++++
 1 file changed, 774 insertions(+)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 3c7b0a298f0..4af9141ec9d 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -85,18 +85,129 @@ We will go through some real-world case test code examples. Each code example co
 
 Navigate to another screen by button press.
 
+Navigator:
+
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
+import { useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Button, Text, View } from 'react-native';
+
+const HomeScreen = () => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Go to Settings"
+      />
+    </View>
+  );
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+    </View>
+  );
+};
 
+export const StackNavigator = createStackNavigator({
+  screens: {
+    Home: HomeScreen,
+    Settings: SettingsScreen,
+  },
+});
 ```
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
+import { createStackNavigator } from '@react-navigation/stack';
+import { Button, Text, View } from 'react-native';
+
+const HomeScreen = ({ navigation }) => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Go to Settings"
+      />
+    </View>
+  );
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+    </View>
+  );
+};
+
+export const StackNavigator = () => {
+  const Stack = createStackNavigator();
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+    </Stack.Navigator>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Test:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { StackNavigator } from './StackNavigator';
+
+test('navigates to settings by button press', () => {
+  const StackNavigation = createStaticNavigation(StackNavigator);
+
+  render(<StackNavigation />);
+
+  fireEvent.press(screen.queryByText('Go to Settings'));
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { StackNavigator } from './StackNavigator';
 
+test('navigates to settings by button press', () => {
+  render(
+    <NavigationContainer>
+      <StackNavigator />
+    </NavigationContainer>
+  );
+
+  fireEvent.press(screen.queryByText('Go to Settings'));
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
 ```
 
 </TabItem>
@@ -108,6 +219,166 @@ We simulate user’s button press by `FireEvent` and call `expect` to check if r
 
 Navigate to another tab caused by tab bar button press.
 
+Navigator:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
+
+const HomeScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+    </View>
+  );
+};
+
+export const TabNavigator = createBottomTabNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        tabBarButtonTestID: 'home-tab',
+      },
+    },
+    Settings: {
+      screen: SettingsScreen,
+      options: {
+        tabBarButtonTestID: 'settings-tab',
+      },
+    },
+  },
+  screenOptions: {
+    headerShown: false,
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
+
+const HomeScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+    </View>
+  );
+};
+
+const Tab = createBottomTabNavigator();
+
+export const TabNavigator = () => {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarButtonTestID: 'home-tab',
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarButtonTestID: 'settings-tab',
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Test:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+test('navigates to settings by tab bar button press', () => {
+  const TabNavigation = createStaticNavigation(TabNavigator);
+  jest.useFakeTimers();
+
+  render(<TabNavigation />);
+
+  act(() => jest.runAllTimers());
+
+  const button = screen.queryByTestId('settings-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+
+  fireEvent.press(button);
+
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+test('navigates to settings by tab bar button press', () => {
+  jest.useFakeTimers();
+
+  render(
+    <NavigationContainer>
+      <TabNavigator />
+    </NavigationContainer>
+  );
+
+  act(() => jest.runAllTimers());
+
+  const button = screen.queryByTestId('settings-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+  const event = {};
+  fireEvent.press(button, event);
+
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+</Tabs>
+
 We use `id` to query for tab buttons, simulate button press by `FireEvent` and check if rendered content is correct.
 
 To setup tab `id` you need to add `tabBarButtonTestID` in settings tab screen `options` defined in `TabNavigator`.
@@ -120,12 +391,515 @@ Sometimes navigation animations need some time to finish and render screen's con
 
 Always display first screen of the settings stack nested in tab after settings stack tab focus.
 
+Navigator:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useEffect } from 'react';
+import { Button, Text, View } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const DetailsScreen = ({ navigation }) => {
+  useEffect(() => {
+    const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
+      navigation.popToTop();
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Details screen</Text>
+    </View>
+  );
+};
+
+const SettingsStack = createNativeStackNavigator();
+
+function SettingsStackScreen() {
+  return (
+    <SettingsStack.Navigator>
+      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
+      <SettingsStack.Screen name="Details" component={DetailsScreen} />
+    </SettingsStack.Navigator>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+export function TabNavigator() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ tabBarButtonTestID: 'home-tab' }}
+      />
+      <Tab.Screen
+        name="SettingsStack"
+        component={SettingsStackScreen}
+        options={{ tabBarButtonTestID: 'settings-tab' }}
+      />
+    </Tab.Navigator>
+  );
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useEffect } from 'react';
+import { Button, Text, View } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const DetailsScreen = () => {
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
+      navigation.popToTop();
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Details screen</Text>
+    </View>
+  );
+};
+
+const SettingsNavigator = createStackNavigator({
+  screens: {
+    Settings: SettingsScreen,
+    Details: DetailsScreen,
+  },
+});
+
+export const TabNavigator = createBottomTabNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        tabBarButtonTestID: 'home-tab',
+      },
+    },
+    SettingsStack: {
+      screen: SettingsNavigator,
+      options: {
+        tabBarButtonTestID: 'settings-tab',
+      },
+    },
+  },
+  screenOptions: {
+    headerShown: false,
+  },
+});
+```
+
+</TabItem>
+</Tabs>
+
+Test:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+test('always displays first screen in settings stack after tab bar settings button press', async () => {
+  const TabNavigation = createStaticNavigation(TabNavigator);
+  jest.useFakeTimers();
+
+  render(<TabNavigation />);
+
+  act(() => jest.runAllTimers());
+
+  const homeTabButton = screen.queryByTestId('home-tab');
+  const settingsTabButton = screen.queryByTestId('settings-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+  const event = {};
+
+  fireEvent.press(settingsTabButton, event);
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+
+  fireEvent.press(screen.queryByText('Go to Details'), event);
+  expect(screen.queryByText('Details screen')).toBeOnTheScreen();
+
+  fireEvent.press(homeTabButton, event);
+  expect(screen.queryByText('Home screen')).toBeOnTheScreen();
+
+  fireEvent.press(settingsTabButton, event);
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+test('always displays first screen in settings stack after tab bar settings button press', async () => {
+  jest.useFakeTimers();
+
+  render(
+    <NavigationContainer>
+      <TabNavigator />
+    </NavigationContainer>
+  );
+
+  act(() => jest.runAllTimers());
+
+  const homeTabButton = screen.queryByTestId('home-tab');
+  const settingsTabButton = screen.queryByTestId('settings-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+  const event = {};
+
+  fireEvent.press(settingsTabButton, event);
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+
+  fireEvent.press(screen.queryByText('Go to Details'), event);
+  expect(screen.queryByText('Details screen')).toBeOnTheScreen();
+
+  fireEvent.press(homeTabButton, event);
+  expect(screen.queryByText('Home screen')).toBeOnTheScreen();
+
+  fireEvent.press(settingsTabButton, event);
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+</Tabs>
+
 We query tab buttons, simulating button presses and check if rendered screens are correct.
 
 ### Example 4
 
 Display loading state while waiting for data and then fetched nick on every profile screen focus.
 
+Navigator:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+}
+
+const url = 'your_url';
+
+function ProfileScreen() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+
+  useFocusEffect(
+    useCallback(() => {
+      fetch(url)
+        .then((res) => res.json())
+        .then((res) => setData(res))
+        .catch((error) => setError(error))
+        .finally(() => setLoading(false));
+
+      return () => {
+        setData(undefined);
+        setError(undefined);
+        setLoading(true);
+      };
+    }, [])
+  );
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      {loading && <Text>Loading</Text>}
+      {!loading && error && <Text>{error.message}</Text>}
+      {!loading && !error && <Text>{data.profile.nick}</Text>}
+    </View>
+  );
+}
+
+export const TabNavigator = createBottomTabNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+      options: {
+        tabBarButtonTestID: 'home-tab',
+      },
+    },
+    Profile: {
+      screen: ProfileScreen,
+      options: {
+        tabBarButtonTestID: 'profile-tab',
+      },
+    },
+  },
+  screenOptions: {
+    headerShown: false,
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback, useState } from 'react';
+import { Text, View } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home screen</Text>
+    </View>
+  );
+}
+
+const url = 'your_url';
+
+function ProfileScreen() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+
+  useFocusEffect(
+    useCallback(() => {
+      fetch(url)
+        .then((res) => res.json())
+        .then((res) => setData(res))
+        .catch((error) => setError(error))
+        .finally(() => setLoading(false));
+
+      return () => {
+        setData(undefined);
+        setError(undefined);
+        setLoading(true);
+      };
+    }, [])
+  );
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      {loading && <Text>Loading</Text>}
+      {!loading && error && <Text>{error.message}</Text>}
+      {!loading && !error && <Text>{data.profile.nick}</Text>}
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+export function TabNavigator() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ tabBarButtonTestID: 'home-tab' }}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{ tabBarButtonTestID: 'profile-tab' }}
+      />
+    </Tab.Navigator>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
+
+Test:
+
+<Tabs groupId="example" queryString="example">
+<TabItem value="static" label="Static" default>
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { createStaticNavigation } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+async function mockedFetch() {
+  const mockResponse = {
+    profile: {
+      nick: 'CookieDough',
+    },
+  };
+  return {
+    ok: true,
+    status: 200,
+    json: async () => {
+      return mockResponse;
+    },
+  };
+}
+
+test('fetches profile data on profile screen focus', async () => {
+  const TabNavigation = createStaticNavigation(TabNavigator);
+  jest.useFakeTimers();
+
+  render(<TabNavigation />);
+
+  act(() => jest.runAllTimers());
+
+  const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
+
+  const homeTabButton = screen.queryByTestId('home-tab');
+  const dogsTabButton = screen.queryByTestId('profile-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+  const event = {};
+
+  fireEvent.press(dogsTabButton, event);
+
+  expect(screen.queryByText('Loading')).toBeOnTheScreen();
+  expect(spy).toHaveBeenCalled();
+  expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
+
+  fireEvent.press(homeTabButton, event);
+  fireEvent.press(dogsTabButton, event);
+
+  expect(screen.queryByText('Loading')).toBeOnTheScreen();
+  expect(spy).toHaveBeenCalled();
+  expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { expect, jest, test } from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { TabNavigator } from './TabNavigator';
+
+async function mockedFetch() {
+  const mockResponse = {
+    profile: {
+      nick: 'CookieDough',
+    },
+  };
+  return {
+    ok: true,
+    status: 200,
+    json: async () => {
+      return mockResponse;
+    },
+  };
+}
+
+test('fetches profile data on profile screen focus', async () => {
+  jest.useFakeTimers();
+
+  render(
+    <NavigationContainer>
+      <TabNavigator />
+    </NavigationContainer>
+  );
+
+  act(() => jest.runAllTimers());
+
+  const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
+
+  const homeTabButton = screen.queryByTestId('home-tab');
+  const dogsTabButton = screen.queryByTestId('profile-tab');
+
+  // You need to pass event object to fireEvent to prevent error
+  const event = {};
+
+  fireEvent.press(dogsTabButton, event);
+
+  expect(screen.queryByText('Loading')).toBeOnTheScreen();
+  expect(spy).toHaveBeenCalled();
+  expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
+
+  fireEvent.press(homeTabButton, event);
+  fireEvent.press(dogsTabButton, event);
+
+  expect(screen.queryByText('Loading')).toBeOnTheScreen();
+  expect(spy).toHaveBeenCalled();
+  expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
+});
+```
+
+</TabItem>
+</Tabs>
+
 We query bottoms tabs buttons and mock fetch function using `spyOn` and `mockImplementation`. Then, we navigate to profile screen and checks if loading state displays correctly. To check if fetched data is displayed we add `await` to query - we need to wait for the fetch to finish before checking if fetched data is correct. To ensure that operation will succeed on every focus, we cause it again by navigating back to home, again to settings and check rendered content again.
 
 It a good practice to use mocks while testing API functions. `mockedFetch` will override real implementation of fetch and enable us to make test deterministic. Thanks to `spyOnYou` you can check if mocked function was called using `toHaveBeenCalled` assertion.

From 13bfcc29b120232ca8e7f7d04269e185834881ed Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 15:24:59 +0200
Subject: [PATCH 19/25] use getByRole

---
 versioned_docs/version-7.x/testing.md | 359 +++++++++++++-------------
 1 file changed, 184 insertions(+), 175 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 4af9141ec9d..f8b1fae1ae4 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,13 +79,11 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We will go through some real-world case test code examples. Each code example consist of navigator and test code file.
+We will go through some real-world case test code examples. Each code example consists of navigator and test code file.
 
 ### Example 1
 
-Navigate to another screen by button press.
-
-Navigator:
+Navigate to settings screen by button press.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -166,8 +164,6 @@ export const StackNavigator = () => {
 </TabItem>
 </Tabs>
 
-Test:
-
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
@@ -180,7 +176,6 @@ import { StackNavigator } from './StackNavigator';
 
 test('navigates to settings by button press', () => {
   const StackNavigation = createStaticNavigation(StackNavigator);
-
   render(<StackNavigation />);
 
   fireEvent.press(screen.queryByText('Go to Settings'));
@@ -213,13 +208,11 @@ test('navigates to settings by button press', () => {
 </TabItem>
 </Tabs>
 
-We simulate user’s button press by `FireEvent` and call `expect` to check if rendered content is correct.
+We press button by `FireEvent` to navigate to settings screen and call `expect` to check if rendered content is correct.
 
 ### Example 2
 
-Navigate to another tab caused by tab bar button press.
-
-Navigator:
+Navigate to settings screen by tab bar button press.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -246,18 +239,8 @@ const SettingsScreen = () => {
 
 export const TabNavigator = createBottomTabNavigator({
   screens: {
-    Home: {
-      screen: HomeScreen,
-      options: {
-        tabBarButtonTestID: 'home-tab',
-      },
-    },
-    Settings: {
-      screen: SettingsScreen,
-      options: {
-        tabBarButtonTestID: 'settings-tab',
-      },
-    },
+    Home: HomeScreen,
+    Settings: SettingsScreen,
   },
   screenOptions: {
     headerShown: false,
@@ -293,20 +276,8 @@ const Tab = createBottomTabNavigator();
 export const TabNavigator = () => {
   return (
     <Tab.Navigator screenOptions={{ headerShown: false }}>
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          tabBarButtonTestID: 'home-tab',
-        }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          tabBarButtonTestID: 'settings-tab',
-        }}
-      />
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 };
@@ -315,8 +286,6 @@ export const TabNavigator = () => {
 </TabItem>
 </Tabs>
 
-Test:
-
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
@@ -328,18 +297,17 @@ import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import { TabNavigator } from './TabNavigator';
 
 test('navigates to settings by tab bar button press', () => {
-  const TabNavigation = createStaticNavigation(TabNavigator);
   jest.useFakeTimers();
 
+  const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
   act(() => jest.runAllTimers());
 
-  const button = screen.queryByTestId('settings-tab');
-
-  // You need to pass event object to fireEvent to prevent error
+  const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 
-  fireEvent.press(button);
+  const event = {};
+  fireEvent.press(button, event);
 
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 });
@@ -366,9 +334,8 @@ test('navigates to settings by tab bar button press', () => {
 
   act(() => jest.runAllTimers());
 
-  const button = screen.queryByTestId('settings-tab');
+  const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 
-  // You need to pass event object to fireEvent to prevent error
   const event = {};
   fireEvent.press(button, event);
 
@@ -379,26 +346,59 @@ test('navigates to settings by tab bar button press', () => {
 </TabItem>
 </Tabs>
 
-We use `id` to query for tab buttons, simulate button press by `FireEvent` and check if rendered content is correct.
+We get settings tab bar button, press by `FireEvent` and check if rendered content is correct.
 
-To setup tab `id` you need to add `tabBarButtonTestID` in settings tab screen `options` defined in `TabNavigator`.
+To find settings tab button you cannot use query by text, because there is no text you can use to do that. You can use `getByRole` instead and pass `name` prop.
+
+```js
+// Pass name of tab as second prop
+const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
+```
 
 Bottom tabs bar buttons `handlePress` function expects `GestureResponderEvent`. To avoid error you should pass `event` object as the second argument of `fireEvent`.
 
+```js
+// Pass event object to fireEvent to prevent error
+const event = {};
+fireEvent.press(button, event);
+```
+
 Sometimes navigation animations need some time to finish and render screen's content. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time and avoid getting state change error.
 
-### Example 3
+<Tabs>
+<TabItem value="static" label="Static">
 
-Always display first screen of the settings stack nested in tab after settings stack tab focus.
+```js
+// Enable fake timers
+jest.useFakeTimers();
+
+// ...
+
+// Skip all timers including animations
+act(() => jest.runAllTimers());
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
 
-Navigator:
+```
+
+</TabItem>
+</Tabs>
+
+### Example 3
+
+Always displays settings screen after tab bar settings button press.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 import { useEffect } from 'react';
 import { Button, Text, View } from 'react-native';
 
@@ -410,7 +410,9 @@ function HomeScreen() {
   );
 }
 
-function SettingsScreen({ navigation }) {
+function SettingsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings screen</Text>
@@ -422,7 +424,9 @@ function SettingsScreen({ navigation }) {
   );
 }
 
-const DetailsScreen = ({ navigation }) => {
+const DetailsScreen = () => {
+  const navigation = useNavigation();
+
   useEffect(() => {
     const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
       navigation.popToTop();
@@ -437,35 +441,22 @@ const DetailsScreen = ({ navigation }) => {
   );
 };
 
-const SettingsStack = createNativeStackNavigator();
-
-function SettingsStackScreen() {
-  return (
-    <SettingsStack.Navigator>
-      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
-      <SettingsStack.Screen name="Details" component={DetailsScreen} />
-    </SettingsStack.Navigator>
-  );
-}
-
-const Tab = createBottomTabNavigator();
+const SettingsNavigator = createStackNavigator({
+  screens: {
+    Settings: SettingsScreen,
+    Details: DetailsScreen,
+  },
+});
 
-export function TabNavigator() {
-  return (
-    <Tab.Navigator screenOptions={{ headerShown: false }}>
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{ tabBarButtonTestID: 'home-tab' }}
-      />
-      <Tab.Screen
-        name="SettingsStack"
-        component={SettingsStackScreen}
-        options={{ tabBarButtonTestID: 'settings-tab' }}
-      />
-    </Tab.Navigator>
-  );
-}
+export const TabNavigator = createBottomTabNavigator({
+  screens: {
+    Home: HomeScreen,
+    SettingsStack: SettingsNavigator,
+  },
+  screenOptions: {
+    headerShown: false,
+  },
+});
 ```
 
 </TabItem>
@@ -473,8 +464,7 @@ export function TabNavigator() {
 
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { useNavigation } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useEffect } from 'react';
 import { Button, Text, View } from 'react-native';
 
@@ -486,9 +476,7 @@ function HomeScreen() {
   );
 }
 
-function SettingsScreen() {
-  const navigation = useNavigation();
-
+function SettingsScreen({ navigation }) {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings screen</Text>
@@ -500,9 +488,7 @@ function SettingsScreen() {
   );
 }
 
-const DetailsScreen = () => {
-  const navigation = useNavigation();
-
+const DetailsScreen = ({ navigation }) => {
   useEffect(() => {
     const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
       navigation.popToTop();
@@ -517,61 +503,60 @@ const DetailsScreen = () => {
   );
 };
 
-const SettingsNavigator = createStackNavigator({
-  screens: {
-    Settings: SettingsScreen,
-    Details: DetailsScreen,
-  },
-});
+const SettingsStack = createNativeStackNavigator();
 
-export const TabNavigator = createBottomTabNavigator({
-  screens: {
-    Home: {
-      screen: HomeScreen,
-      options: {
-        tabBarButtonTestID: 'home-tab',
-      },
-    },
-    SettingsStack: {
-      screen: SettingsNavigator,
-      options: {
-        tabBarButtonTestID: 'settings-tab',
-      },
-    },
-  },
-  screenOptions: {
-    headerShown: false,
-  },
-});
+function SettingsStackScreen() {
+  return (
+    <SettingsStack.Navigator>
+      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
+      <SettingsStack.Screen name="Details" component={DetailsScreen} />
+    </SettingsStack.Navigator>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+export function TabNavigator() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
+    </Tab.Navigator>
+  );
+}
 ```
 
 </TabItem>
 </Tabs>
 
-Test:
-
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
+import '@testing-library/react-native/extend-expect';
+
 import { expect, jest, test } from '@jest/globals';
 import { createStaticNavigation } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays first screen in settings stack after tab bar settings button press', async () => {
-  const TabNavigation = createStaticNavigation(TabNavigator);
+test('always displays settings screen after tab bar settings button press', async () => {
   jest.useFakeTimers();
 
+  const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
   act(() => jest.runAllTimers());
 
-  const homeTabButton = screen.queryByTestId('home-tab');
-  const settingsTabButton = screen.queryByTestId('settings-tab');
+  const homeTabButton = screen.getByRole('button', {
+    name: 'Home, tab, 1 of 2',
+  });
+
+  const settingsTabButton = screen.getByRole('button', {
+    name: 'SettingsStack, tab, 2 of 2',
+  });
 
-  // You need to pass event object to fireEvent to prevent error
   const event = {};
 
   fireEvent.press(settingsTabButton, event);
@@ -592,13 +577,15 @@ test('always displays first screen in settings stack after tab bar settings butt
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
+import '@testing-library/react-native/extend-expect';
+
 import { expect, jest, test } from '@jest/globals';
 import { NavigationContainer } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays first screen in settings stack after tab bar settings button press', async () => {
+test('always displays settings screen after tab bar settings button press', async () => {
   jest.useFakeTimers();
 
   render(
@@ -609,10 +596,13 @@ test('always displays first screen in settings stack after tab bar settings butt
 
   act(() => jest.runAllTimers());
 
-  const homeTabButton = screen.queryByTestId('home-tab');
-  const settingsTabButton = screen.queryByTestId('settings-tab');
+  const homeTabButton = screen.getByRole('button', {
+    name: 'Home, tab, 1 of 2',
+  });
+  const settingsTabButton = screen.getByRole('button', {
+    name: 'SettingsStack, tab, 2 of 2',
+  });
 
-  // You need to pass event object to fireEvent to prevent error
   const event = {};
 
   fireEvent.press(settingsTabButton, event);
@@ -632,13 +622,11 @@ test('always displays first screen in settings stack after tab bar settings butt
 </TabItem>
 </Tabs>
 
-We query tab buttons, simulating button presses and check if rendered screens are correct.
+We query tab bar buttons, press buttons and check if rendered screens are correct.
 
 ### Example 4
 
-Display loading state while waiting for data and then fetched nick on every profile screen focus.
-
-Navigator:
+Display loading state while waiting for data and then fetched profile nick on every profile screen focus.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -657,7 +645,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'your_url';
+const url = 'place_your_url';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);
@@ -668,7 +656,7 @@ function ProfileScreen() {
     useCallback(() => {
       fetch(url)
         .then((res) => res.json())
-        .then((res) => setData(res))
+        .then((data) => setData(data))
         .catch((error) => setError(error))
         .finally(() => setLoading(false));
 
@@ -690,18 +678,8 @@ function ProfileScreen() {
 
 export const TabNavigator = createBottomTabNavigator({
   screens: {
-    Home: {
-      screen: HomeScreen,
-      options: {
-        tabBarButtonTestID: 'home-tab',
-      },
-    },
-    Profile: {
-      screen: ProfileScreen,
-      options: {
-        tabBarButtonTestID: 'profile-tab',
-      },
-    },
+    Home: HomeScreen,
+    Profile: ProfileScreen,
   },
   screenOptions: {
     headerShown: false,
@@ -726,7 +704,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'your_url';
+const url = 'place_url_here';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);
@@ -737,7 +715,7 @@ function ProfileScreen() {
     useCallback(() => {
       fetch(url)
         .then((res) => res.json())
-        .then((res) => setData(res))
+        .then((data) => setData(data))
         .catch((error) => setError(error))
         .finally(() => setLoading(false));
 
@@ -762,16 +740,8 @@ const Tab = createBottomTabNavigator();
 export function TabNavigator() {
   return (
     <Tab.Navigator screenOptions={{ headerShown: false }}>
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{ tabBarButtonTestID: 'home-tab' }}
-      />
-      <Tab.Screen
-        name="Profile"
-        component={ProfileScreen}
-        options={{ tabBarButtonTestID: 'profile-tab' }}
-      />
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
     </Tab.Navigator>
   );
 }
@@ -780,12 +750,12 @@ export function TabNavigator() {
 </TabItem>
 </Tabs>
 
-Test:
-
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
 
 ```js
+import '@testing-library/react-native/extend-expect';
+
 import { expect, jest, test } from '@jest/globals';
 import { createStaticNavigation } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
@@ -807,30 +777,33 @@ async function mockedFetch() {
   };
 }
 
-test('fetches profile data on profile screen focus', async () => {
-  const TabNavigation = createStaticNavigation(TabNavigator);
+test('Display loading state while waiting for data and then fetched profile nick on every profile screen focus', async () => {
   jest.useFakeTimers();
 
+  const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
   act(() => jest.runAllTimers());
 
   const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
 
-  const homeTabButton = screen.queryByTestId('home-tab');
-  const dogsTabButton = screen.queryByTestId('profile-tab');
+  const homeTabButton = screen.getByRole('button', {
+    name: 'Home, tab, 1 of 2',
+  });
 
-  // You need to pass event object to fireEvent to prevent error
-  const event = {};
+  const profileTabButton = screen.getByRole('button', {
+    name: 'Profile, tab, 2 of 2',
+  });
 
-  fireEvent.press(dogsTabButton, event);
+  const event = {};
+  fireEvent.press(profileTabButton, event);
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
   expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
 
   fireEvent.press(homeTabButton, event);
-  fireEvent.press(dogsTabButton, event);
+  fireEvent.press(profileTabButton, event);
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
@@ -842,6 +815,8 @@ test('fetches profile data on profile screen focus', async () => {
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
+import '@testing-library/react-native/extend-expect';
+
 import { expect, jest, test } from '@jest/globals';
 import { NavigationContainer } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
@@ -863,7 +838,7 @@ async function mockedFetch() {
   };
 }
 
-test('fetches profile data on profile screen focus', async () => {
+test('Display loading state while waiting for data and then fetched profile nick on every profile screen focus', async () => {
   jest.useFakeTimers();
 
   render(
@@ -876,20 +851,22 @@ test('fetches profile data on profile screen focus', async () => {
 
   const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
 
-  const homeTabButton = screen.queryByTestId('home-tab');
-  const dogsTabButton = screen.queryByTestId('profile-tab');
+  const homeTabButton = screen.getByRole('button', {
+    name: 'Home, tab, 1 of 2',
+  });
+  const profileTabButton = screen.getByRole('button', {
+    name: 'Profile, tab, 2 of 2',
+  });
 
-  // You need to pass event object to fireEvent to prevent error
   const event = {};
-
-  fireEvent.press(dogsTabButton, event);
+  fireEvent.press(profileTabButton, event);
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
   expect(await screen.findByText('CookieDough')).toBeOnTheScreen();
 
   fireEvent.press(homeTabButton, event);
-  fireEvent.press(dogsTabButton, event);
+  fireEvent.press(profileTabButton, event);
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
@@ -900,9 +877,41 @@ test('fetches profile data on profile screen focus', async () => {
 </TabItem>
 </Tabs>
 
-We query bottoms tabs buttons and mock fetch function using `spyOn` and `mockImplementation`. Then, we navigate to profile screen and checks if loading state displays correctly. To check if fetched data is displayed we add `await` to query - we need to wait for the fetch to finish before checking if fetched data is correct. To ensure that operation will succeed on every focus, we cause it again by navigating back to home, again to settings and check rendered content again.
+We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed correctly we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed on every focus, we navigate back to home, then to settings and check rendered content again.
+
+To make test deterministic and isolate it from the real backend you can mock fetch function. `mockedFetch` will override real implementation of fetch and `spyOn` will enable you to check number of function calls.
 
-It a good practice to use mocks while testing API functions. `mockedFetch` will override real implementation of fetch and enable us to make test deterministic. Thanks to `spyOnYou` you can check if mocked function was called using `toHaveBeenCalled` assertion.
+```js
+// Mock implementation of fetch function
+async function mockedFetch() {
+  const mockResponse = {
+    profile: {
+      nick: 'CookieDough',
+    },
+  };
+  return {
+    ok: true,
+    status: 200,
+    json: async () => {
+      return mockResponse;
+    },
+  };
+}
+
+test('display loading state while waiting for data and then fetched profile nick on every profile screen focus', async () => {
+  // ...
+
+  // Replace fetch implementation with mock
+  const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
+
+  // ...
+
+  // Check number of mock fetch calls
+  expect(spy).toHaveBeenCalled();
+
+  // ...
+});
+```
 
 ## Best practices
 

From c582029b08dc370cf5d46c44425e994255e67b05 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 15:27:23 +0200
Subject: [PATCH 20/25] correct comment

---
 versioned_docs/version-7.x/testing.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index f8b1fae1ae4..5b9d2291ef3 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -879,7 +879,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 
 We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed correctly we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed on every focus, we navigate back to home, then to settings and check rendered content again.
 
-To make test deterministic and isolate it from the real backend you can mock fetch function. `mockedFetch` will override real implementation of fetch and `spyOn` will enable you to check number of function calls.
+To make test deterministic and isolate it from the real backend you can mock fetch function. You can use `spyOn` to override real implementation of fetch with `mockedFetch`.
 
 ```js
 // Mock implementation of fetch function
@@ -906,7 +906,7 @@ test('display loading state while waiting for data and then fetched profile nick
 
   // ...
 
-  // Check number of mock fetch calls
+  // Check if mock fetch was called
   expect(spy).toHaveBeenCalled();
 
   // ...

From 5c5ec89e310bc88af959dbdd5c97c745fa824d0b Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 15:52:43 +0200
Subject: [PATCH 21/25] fix fake timers

---
 versioned_docs/version-7.x/testing.md | 53 +++++++++------------------
 1 file changed, 17 insertions(+), 36 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 5b9d2291ef3..546cbe755f1 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -302,12 +302,11 @@ test('navigates to settings by tab bar button press', () => {
   const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
-  act(() => jest.runAllTimers());
-
   const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 
   const event = {};
   fireEvent.press(button, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 });
@@ -332,12 +331,11 @@ test('navigates to settings by tab bar button press', () => {
     </NavigationContainer>
   );
 
-  act(() => jest.runAllTimers());
-
   const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 
   const event = {};
   fireEvent.press(button, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 });
@@ -363,10 +361,7 @@ const event = {};
 fireEvent.press(button, event);
 ```
 
-Sometimes navigation animations need some time to finish and render screen's content. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time and avoid getting state change error.
-
-<Tabs>
-<TabItem value="static" label="Static">
+Sometimes navigation animations need some time to finish. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animations time and avoid getting state change error.
 
 ```js
 // Enable fake timers
@@ -378,16 +373,6 @@ jest.useFakeTimers();
 act(() => jest.runAllTimers());
 ```
 
-</TabItem>
-<TabItem value="dynamic" label="Dynamic">
-
-```js
-
-```
-
-</TabItem>
-</Tabs>
-
 ### Example 3
 
 Always displays settings screen after tab bar settings button press.
@@ -533,22 +518,18 @@ export function TabNavigator() {
 <TabItem value="static" label="Static" default>
 
 ```js
-import '@testing-library/react-native/extend-expect';
-
 import { expect, jest, test } from '@jest/globals';
 import { createStaticNavigation } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays settings screen after tab bar settings button press', async () => {
+test('always displays settings screen after tab bar settings button press', () => {
   jest.useFakeTimers();
 
   const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
-  act(() => jest.runAllTimers());
-
   const homeTabButton = screen.getByRole('button', {
     name: 'Home, tab, 1 of 2',
   });
@@ -561,14 +542,18 @@ test('always displays settings screen after tab bar settings button press', asyn
 
   fireEvent.press(settingsTabButton, event);
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
+  act(() => jest.runAllTimers());
 
   fireEvent.press(screen.queryByText('Go to Details'), event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Details screen')).toBeOnTheScreen();
 
   fireEvent.press(homeTabButton, event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Home screen')).toBeOnTheScreen();
 
   fireEvent.press(settingsTabButton, event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 });
 ```
@@ -577,15 +562,13 @@ test('always displays settings screen after tab bar settings button press', asyn
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
-import '@testing-library/react-native/extend-expect';
-
 import { expect, jest, test } from '@jest/globals';
 import { NavigationContainer } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays settings screen after tab bar settings button press', async () => {
+test('always displays settings screen after tab bar settings button press', () => {
   jest.useFakeTimers();
 
   render(
@@ -594,8 +577,6 @@ test('always displays settings screen after tab bar settings button press', asyn
     </NavigationContainer>
   );
 
-  act(() => jest.runAllTimers());
-
   const homeTabButton = screen.getByRole('button', {
     name: 'Home, tab, 1 of 2',
   });
@@ -606,15 +587,19 @@ test('always displays settings screen after tab bar settings button press', asyn
   const event = {};
 
   fireEvent.press(settingsTabButton, event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 
   fireEvent.press(screen.queryByText('Go to Details'), event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Details screen')).toBeOnTheScreen();
 
   fireEvent.press(homeTabButton, event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Home screen')).toBeOnTheScreen();
 
   fireEvent.press(settingsTabButton, event);
+  act(() => jest.runAllTimers());
   expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 });
 ```
@@ -754,8 +739,6 @@ export function TabNavigator() {
 <TabItem value="static" label="Static" default>
 
 ```js
-import '@testing-library/react-native/extend-expect';
-
 import { expect, jest, test } from '@jest/globals';
 import { createStaticNavigation } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
@@ -783,8 +766,6 @@ test('Display loading state while waiting for data and then fetched profile nick
   const TabNavigation = createStaticNavigation(TabNavigator);
   render(<TabNavigation />);
 
-  act(() => jest.runAllTimers());
-
   const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
 
   const homeTabButton = screen.getByRole('button', {
@@ -797,6 +778,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 
   const event = {};
   fireEvent.press(profileTabButton, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
@@ -804,6 +786,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 
   fireEvent.press(homeTabButton, event);
   fireEvent.press(profileTabButton, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
@@ -815,8 +798,6 @@ test('Display loading state while waiting for data and then fetched profile nick
 <TabItem value="dynamic" label="Dynamic">
 
 ```js
-import '@testing-library/react-native/extend-expect';
-
 import { expect, jest, test } from '@jest/globals';
 import { NavigationContainer } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
@@ -847,8 +828,6 @@ test('Display loading state while waiting for data and then fetched profile nick
     </NavigationContainer>
   );
 
-  act(() => jest.runAllTimers());
-
   const spy = jest.spyOn(window, 'fetch').mockImplementation(mockedFetch);
 
   const homeTabButton = screen.getByRole('button', {
@@ -860,6 +839,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 
   const event = {};
   fireEvent.press(profileTabButton, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();
@@ -867,6 +847,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 
   fireEvent.press(homeTabButton, event);
   fireEvent.press(profileTabButton, event);
+  act(() => jest.runAllTimers());
 
   expect(screen.queryByText('Loading')).toBeOnTheScreen();
   expect(spy).toHaveBeenCalled();

From 55e6cb899e8fe356444c6250b8bd29948367fd9e Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 16:29:15 +0200
Subject: [PATCH 22/25] text clean up

---
 versioned_docs/version-7.x/testing.md | 35 ++++++++++++++-------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 546cbe755f1..f0670b18681 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -79,11 +79,11 @@ If you're not using Jest, then you'll need to mock these modules according to th
 
 We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests.
 
-We will go through some real-world case test code examples. Each code example consists of navigator and test code file.
+We will go through some real-world case test code examples. Each code example consists of tested navigator and test code file.
 
 ### Example 1
 
-Navigate to settings screen by button press.
+Navigate to settings screen by "Go to Settings" button press.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -174,7 +174,7 @@ import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { StackNavigator } from './StackNavigator';
 
-test('navigates to settings by button press', () => {
+test('navigates to settings by "Go to Settings" button press', () => {
   const StackNavigation = createStaticNavigation(StackNavigator);
   render(<StackNavigation />);
 
@@ -193,7 +193,7 @@ import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { StackNavigator } from './StackNavigator';
 
-test('navigates to settings by button press', () => {
+test('navigates to settings by "Go to Settings" button press', () => {
   render(
     <NavigationContainer>
       <StackNavigator />
@@ -208,7 +208,7 @@ test('navigates to settings by button press', () => {
 </TabItem>
 </Tabs>
 
-We press button by `FireEvent` to navigate to settings screen and call `expect` to check if rendered content is correct.
+We use `FireEvent` to press button and `expect` to check if rendered screen's content matches settings.
 
 ### Example 2
 
@@ -344,24 +344,24 @@ test('navigates to settings by tab bar button press', () => {
 </TabItem>
 </Tabs>
 
-We get settings tab bar button, press by `FireEvent` and check if rendered content is correct.
+We get settings tab bar button, press it and check if rendered content is correct.
 
-To find settings tab button you cannot use query by text, because there is no text you can use to do that. You can use `getByRole` instead and pass `name` prop.
+To find settings tab button you cannot use `queryByText`, because there is no text that can be queried. You can use `getByRole` instead and pass object with `name` prop as the second argument.
 
 ```js
-// Pass name of tab as second prop
+// Pass name of settings tab
 const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 ```
 
-Bottom tabs bar buttons `handlePress` function expects `GestureResponderEvent`. To avoid error you should pass `event` object as the second argument of `fireEvent`.
+Tab bar buttons `handlePress` function expects to receive `GestureResponderEvent`. To avoid error you should pass `event` object as the second argument of `fireEvent`.
 
 ```js
-// Pass event object to fireEvent to prevent error
+// Pass event object to avoid error
 const event = {};
 fireEvent.press(button, event);
 ```
 
-Sometimes navigation animations need some time to finish. You need to wait until animations finish before querying components. Therefore, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animations time and avoid getting state change error.
+While writing tests containing navigation with animations you need to wait until animations finish before querying components. To do so, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time. To avoid getting state change error wrap `runAllTimers` with `act`.
 
 ```js
 // Enable fake timers
@@ -369,6 +369,7 @@ jest.useFakeTimers();
 
 // ...
 
+// Wrap jest.runAllTimers to prevent state change error
 // Skip all timers including animations
 act(() => jest.runAllTimers());
 ```
@@ -449,7 +450,7 @@ export const TabNavigator = createBottomTabNavigator({
 
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
 import { useEffect } from 'react';
 import { Button, Text, View } from 'react-native';
 
@@ -488,7 +489,7 @@ const DetailsScreen = ({ navigation }) => {
   );
 };
 
-const SettingsStack = createNativeStackNavigator();
+const SettingsStack = createStackNavigator();
 
 function SettingsStackScreen() {
   return (
@@ -541,8 +542,8 @@ test('always displays settings screen after tab bar settings button press', () =
   const event = {};
 
   fireEvent.press(settingsTabButton, event);
-  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
   act(() => jest.runAllTimers());
+  expect(screen.queryByText('Settings screen')).toBeOnTheScreen();
 
   fireEvent.press(screen.queryByText('Go to Details'), event);
   act(() => jest.runAllTimers());
@@ -630,7 +631,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'place_your_url';
+const url = 'place_your_url_here';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);
@@ -689,7 +690,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'place_url_here';
+const url = 'place_your_url_here';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);
@@ -858,7 +859,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 </TabItem>
 </Tabs>
 
-We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed correctly we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed on every focus, we navigate back to home, then to settings and check rendered content again.
+We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed, we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed on every focus, we navigate back to home, then to settings and check loading state and fetched data again.
 
 To make test deterministic and isolate it from the real backend you can mock fetch function. You can use `spyOn` to override real implementation of fetch with `mockedFetch`.
 

From 7da2155822a376d4598636b20ee2464020a0dc45 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 16:47:03 +0200
Subject: [PATCH 23/25] swap url

---
 versioned_docs/version-7.x/testing.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index f0670b18681..db20efbffec 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -631,7 +631,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'place_your_url_here';
+const url = 'placeholder_url';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);
@@ -690,7 +690,7 @@ function HomeScreen() {
   );
 }
 
-const url = 'place_your_url_here';
+const url = 'placeholder_url';
 
 function ProfileScreen() {
   const [loading, setLoading] = useState(true);

From 6f506b0529005cc8335bc3cd4c9e882f4e6cf88c Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 18:01:11 +0200
Subject: [PATCH 24/25] clean up

---
 versioned_docs/version-7.x/testing.md | 28 ++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index db20efbffec..229b32a7933 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -208,7 +208,7 @@ test('navigates to settings by "Go to Settings" button press', () => {
 </TabItem>
 </Tabs>
 
-We use `FireEvent` to press button and `expect` to check if rendered screen's content matches settings.
+We use `FireEvent` to press button and `expect` to check if rendered screen's content matches settings screen.
 
 ### Example 2
 
@@ -346,10 +346,10 @@ test('navigates to settings by tab bar button press', () => {
 
 We get settings tab bar button, press it and check if rendered content is correct.
 
-To find settings tab button you cannot use `queryByText`, because there is no text that can be queried. You can use `getByRole` instead and pass object with `name` prop as the second argument.
+To find settings tab bar button you cannot use `queryByText`, because there is no text that can be queried. You can use `getByRole` instead and pass object with `name` prop as the second argument.
 
 ```js
-// Pass name of settings tab
+// Pass object with settings tab name
 const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' });
 ```
 
@@ -361,7 +361,7 @@ const event = {};
 fireEvent.press(button, event);
 ```
 
-While writing tests containing navigation with animations you need to wait until animations finish before querying components. To do so, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock ticks. They allow you to instantly skip animation time. To avoid getting state change error wrap `runAllTimers` with `act`.
+While writing tests containing navigation with animations you need to wait until animations finish before querying components. To do so, you have to use `fake timers`. [`Fake Timers`](https://jestjs.io/docs/timer-mocks) replace real implementation of times function to use fake clock. They allow you to instantly skip animation time. To avoid getting state change error, wrap `runAllTimers` in `act`.
 
 ```js
 // Enable fake timers
@@ -369,14 +369,14 @@ jest.useFakeTimers();
 
 // ...
 
-// Wrap jest.runAllTimers to prevent state change error
+// Wrap jest.runAllTimers in act to prevent state change error
 // Skip all timers including animations
 act(() => jest.runAllTimers());
 ```
 
 ### Example 3
 
-Always displays settings screen after tab bar settings button press.
+Always displays settings screen after settings tab bar button press.
 
 <Tabs groupId="example" queryString="example">
 <TabItem value="static" label="Static" default>
@@ -410,7 +410,7 @@ function SettingsScreen() {
   );
 }
 
-const DetailsScreen = () => {
+function DetailsScreen() {
   const navigation = useNavigation();
 
   useEffect(() => {
@@ -425,7 +425,7 @@ const DetailsScreen = () => {
       <Text>Details screen</Text>
     </View>
   );
-};
+}
 
 const SettingsNavigator = createStackNavigator({
   screens: {
@@ -474,7 +474,7 @@ function SettingsScreen({ navigation }) {
   );
 }
 
-const DetailsScreen = ({ navigation }) => {
+function DetailsScreen({ navigation }) {
   useEffect(() => {
     const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
       navigation.popToTop();
@@ -487,7 +487,7 @@ const DetailsScreen = ({ navigation }) => {
       <Text>Details screen</Text>
     </View>
   );
-};
+}
 
 const SettingsStack = createStackNavigator();
 
@@ -525,7 +525,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays settings screen after tab bar settings button press', () => {
+test('always displays settings screen after settings tab bar button press', () => {
   jest.useFakeTimers();
 
   const TabNavigation = createStaticNavigation(TabNavigator);
@@ -569,7 +569,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { TabNavigator } from './TabNavigator';
 
-test('always displays settings screen after tab bar settings button press', () => {
+test('always displays settings screen after settings tab bar button press', () => {
   jest.useFakeTimers();
 
   render(
@@ -653,6 +653,7 @@ function ProfileScreen() {
       };
     }, [])
   );
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       {loading && <Text>Loading</Text>}
@@ -712,6 +713,7 @@ function ProfileScreen() {
       };
     }, [])
   );
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       {loading && <Text>Loading</Text>}
@@ -859,7 +861,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 </TabItem>
 </Tabs>
 
-We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed, we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed on every focus, we navigate back to home, then to settings and check loading state and fetched data again.
+We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed, we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed not only on first focus, we navigate back to home, then to settings and check loading state and fetched data again.
 
 To make test deterministic and isolate it from the real backend you can mock fetch function. You can use `spyOn` to override real implementation of fetch with `mockedFetch`.
 

From b3ff6b60288f5b37dab118d8228c665d59f9fb59 Mon Sep 17 00:00:00 2001
From: AnCichocka <annacichocka.poczta@gmail.com>
Date: Thu, 17 Oct 2024 18:14:23 +0200
Subject: [PATCH 25/25] clean up

---
 versioned_docs/version-7.x/testing.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/versioned_docs/version-7.x/testing.md b/versioned_docs/version-7.x/testing.md
index 229b32a7933..4f7fcdb9aea 100644
--- a/versioned_docs/version-7.x/testing.md
+++ b/versioned_docs/version-7.x/testing.md
@@ -346,7 +346,7 @@ test('navigates to settings by tab bar button press', () => {
 
 We get settings tab bar button, press it and check if rendered content is correct.
 
-To find settings tab bar button you cannot use `queryByText`, because there is no text that can be queried. You can use `getByRole` instead and pass object with `name` prop as the second argument.
+To find settings tab bar button you cannot use `queryByText`, because there is no text that can be queried. You can use `getByRole` instead and pass object with `name` as the second argument.
 
 ```js
 // Pass object with settings tab name
@@ -861,7 +861,7 @@ test('Display loading state while waiting for data and then fetched profile nick
 </TabItem>
 </Tabs>
 
-We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed, we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed not only on first focus, we navigate back to home, then to settings and check loading state and fetched data again.
+We query tab buttons and mock fetch function using `spyOn` and `mockImplementation`. We navigate to profile screen and check if loading state is rendered correctly. Then, to check if fetched data is displayed, we use `findByText` - we need to wait for the fetch to finish before checking it's result. To ensure that operation will succeed not only on the first focus, we navigate back to home, then to settings and check loading state and fetched data again.
 
 To make test deterministic and isolate it from the real backend you can mock fetch function. You can use `spyOn` to override real implementation of fetch with `mockedFetch`.