refactor stack. Add details to example tests.

This commit is contained in:
Jordan Hewitt 2025-02-18 16:56:19 -08:00
parent bc3d481d25
commit b3c2e09987
7 changed files with 76 additions and 19 deletions

View File

@ -10,6 +10,19 @@ import React, { act } from 'react';
import { render, screen } from '@testing-library/react-native'
import { MyComponent } from '@/app/component/MyComponent';
/**
* IMPORTANT NOTE: If you need to use jest mock, remember that
* you cannot include any external components in the mock.
* You absolutely must use `jest.requireActual` to import the
* component *within* the jest.mock callback.
*/
jest.mock('@/app/component/index.tsx', () => {
// Require-actual the component
const { Text } = jest.requireActual('react-native');
// Use the component.
return () => <Text>Index</Text>
});
describe('Message Component', () => {
beforeEach(() => {

View File

@ -1,3 +1,2 @@
{
"jestTestExplorer.pathToJest": "./node_modules/.bin/jest"
}

View File

@ -0,0 +1,10 @@
// __mocks__/expo-file-system.js
export const File = {
// Define the properties and methods you need for your tests
uri: 'file:///path/to/file',
};
export const Paths = {
// Define the paths you need for your tests
DOCUMENTS_DIRECTORY: '/path/to/documents',
};

View File

@ -5,17 +5,12 @@ import { LanguageSelection } from '@/components/LanguageSelection';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ConversationThread from '@/components/ConversationThread';
import Home from '.';
import TTNavStack from '@/components/TTNavStack';
const Stack = createNativeStackNavigator();
export default function Layout() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='LanguageSelection'>
<Stack.Screen name="LanguageSelection" component={Home} />
<Stack.Screen name="ConversationThread" component={ConversationThread} />
<Stack.Screen name="Settings" component={SettingsComponent} />
</Stack.Navigator>
</NavigationContainer>
<TTNavStack />
);
}

20
components/TTNavStack.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import SettingsComponent from '@/components/Settings';
import { LanguageSelection } from '@/components/LanguageSelection';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ConversationThread from '@/components/ConversationThread';
const Stack = createNativeStackNavigator();
export default function TTNavStack() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='LanguageSelection'>
<Stack.Screen name="LanguageSelection" component={LanguageSelection} />
<Stack.Screen name="ConversationThread" component={ConversationThread} />
<Stack.Screen name="Settings" component={SettingsComponent} />
</Stack.Navigator>
</NavigationContainer>
);
}

View File

@ -0,0 +1,30 @@
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TTNavStack from '../TTNavStack';
jest.mock('expo-file-system', () => require('./__mocks__/expo-file-system'));
const Stack = createStackNavigator();
describe('Navigation', () => {
beforeEach(() => {
// Reset the navigation state before each test
jest.clearAllMocks();
});
it('Navigates to ConversationThread on language selection', async () => {
render(<TTNavStack />);
const languageSelectionText = await screen.findByText("Language Selection");
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");
fireEvent.press(settingsButton);
expect(await screen.findByText("Settings")).toBeOnTheScreen();
});
});

View File

@ -64,20 +64,10 @@
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
],
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{ts,tsx,js,jsx}",
"!**/coverage/**",
"!**/node_modules/**",
"!**/babel.config.js",
"!**/expo-env.d.ts",
"!**/.expo/**"
],
"automock": false,
"setupFilesAfterEnv": [
"<rootDir>/jestSetup.ts"
],
"testTimeout": 10000
]
},
"devDependencies": {
"@babel/core": "^7.26.7",