improve tests, especially for navigation.

components/__tests__/index.spec.tsx

@@ -1,35 +1,61 @@
-import {dirname, resolve} from 'path'
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import { createStackNavigator } from '@react-navigation/stack';
-
 jest.mock("@/app/i18n/api", () => require("../../__mocks__/api.ts"));
+import { renderRouter} from 'expo-router/testing-library';
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
+import {
+  NavigationContainer,
+  createNavigationContainerRef,
+} from "@react-navigation/native";
+import TTNavStack from "../TTNavStack";
 
-import TTNavStack from '../TTNavStack';
-
-const Stack = createStackNavigator();
-
-describe('Navigation', () => {
+describe("Navigation", () => {
   beforeEach(() => {
     // Reset the navigation state before each test
     jest.clearAllMocks();
+    jest.useFakeTimers();
   });
 
-  it('Navigates to ConversationThread on language selection', async () => {
-    render(<TTNavStack />);
-    const languageSelectionText = await screen.findByText(/I Speak French\./i);
+  it("Navigates to ConversationThread on language selection", async () => {
+    const MockComponent = jest.fn(() => <TTNavStack />);
+    renderRouter(
+      {
+        index: MockComponent,
+      },
+      {
+        initialUrl: '/',
+      }
+    );
+    const languageSelectionText = await waitFor(() =>
+      screen.getByText(/.*I Speak French.*/i)
+    );
     act(() => {
       fireEvent.press(languageSelectionText);
-    })
+    });
     expect(await screen.findByText("Conversation Thread")).toBeOnTheScreen();
   });
 
-  it('Navigates to Settings on settings selection', async () => {
-    render(<TTNavStack />);
-    const settingsButton = await screen.findByText("Settings");
-    act(() => {
-      fireEvent.press(settingsButton)
-    })
-    expect(await screen.findByText("Settings")).toBeOnTheScreen();
+  it("Navigates to Settings on settings selection", async () => {
+    const MockComponent = jest.fn(() => <TTNavStack />);
+    renderRouter(
+      {
+        index: MockComponent,
+      },
+      {
+        initialUrl: '/',
+      }
+    );
+    const settingsButton = await waitFor(() =>
+      screen.getByText(/.*Settings.*/i)
+    );
+    fireEvent.press(settingsButton);
+    expect(await waitFor(() => screen.getByText(/Settings/i))).toBeOnTheScreen();
+    // expect(waitFor(() => screen.getByText(/Settings/i))).toBeTruthy()
+    expect(screen.getByText("Settings")).toBeOnTheScreen();
   });
-});
+});