Skip to content

Instantly share code, notes, and snippets.

@adamgrzybowski
Last active August 24, 2023 11:31
Show Gist options
  • Save adamgrzybowski/7839818fb1a9728052bab0a1d84464e4 to your computer and use it in GitHub Desktop.
Save adamgrzybowski/7839818fb1a9728052bab0a1d84464e4 to your computer and use it in GitHub Desktop.
How to fix tests
import {
createNavigationContainerRef,
createNavigatorFactory,
ParamListBase,
StackRouter,
TabRouter,
useNavigationBuilder,
} from '@react-navigation/core';
import { act, render, waitFor } from '@testing-library/react-native';
import * as React from 'react';
import { window } from '../__mocks__/window';
import { NavigationContainer } from '../NavigationContainer';
Object.assign(global, window);
// We want to use the web version of useLinking
// eslint-disable-next-line import/extensions
jest.mock('../useLinking', () => require('../useLinking.tsx'));
it('integrates with the history API', () => {
const createStackNavigator = createNavigatorFactory((props: any) => {
const { state, descriptors, NavigationContent } = useNavigationBuilder(
StackRouter,
props
);
return (
<NavigationContent>
{state.routes.map((route, i) => (
<div key={route.key} aria-current={state.index === i || undefined}>
{descriptors[route.key].render()}
</div>
))}
</NavigationContent>
);
});
const createTabNavigator = createNavigatorFactory((props: any) => {
const { state, descriptors, NavigationContent } = useNavigationBuilder(
TabRouter,
props
);
return (
<NavigationContent>
{state.routes.map((route, i) => (
<div key={route.key} aria-current={state.index === i || undefined}>
{descriptors[route.key].render()}
</div>
))}
</NavigationContent>
);
});
const Stack = createStackNavigator();
const Tab = createTabNavigator();
const TestScreen = ({ route }: any): any =>
`${route.name} ${JSON.stringify(route.params)}`;
const linking = {
prefixes: [],
config: {
screens: {
Home: {
path: '',
initialRouteName: 'Feed',
screens: {
Profile: ':user',
Settings: 'edit',
Updates: 'updates',
Feed: 'feed',
},
},
Chat: 'chat',
},
},
};
const navigation = createNavigationContainerRef<ParamListBase>();
render(
<NavigationContainer ref={navigation} linking={linking}>
<Tab.Navigator>
<Tab.Screen name="Home">
{() => (
<Stack.Navigator initialRouteName="Feed">
<Stack.Screen name="Profile" component={TestScreen} />
<Stack.Screen name="Settings" component={TestScreen} />
<Stack.Screen name="Feed" component={TestScreen} />
<Stack.Screen name="Updates" component={TestScreen} />
</Stack.Navigator>
)}
</Tab.Screen>
<Tab.Screen name="Chat" component={TestScreen} />
</Tab.Navigator>
</NavigationContainer>
);
expect(window.location.pathname).toBe('/feed');
act(() => navigation.current?.navigate('Profile', { user: 'jane' }));
jest.runAllTimers();
waitFor(() => expect(window.location.pathname).toBe('/jane'));
act(() => navigation.current?.navigate('Updates'));
waitFor(() => expect(window.location.pathname).toBe('/updates'));
act(() => navigation.current?.goBack());
jest.runAllTimers();
waitFor(() => expect(window.location.pathname).toBe('/jane'));
act(() => {
window.history.back();
jest.runAllTimers();
});
waitFor(() => expect(window.location.pathname).toBe('/feed'));
act(() => {
window.history.forward();
});
waitFor(() => expect(window.location.pathname).toBe('/jane'));
act(() => navigation.current?.navigate('Settings'));
waitFor(() => expect(window.location.pathname).toBe('/edit'));
act(() => {
window.history.go(-2);
});
waitFor(() => expect(window.location.pathname).toBe('/feed'));
act(() => navigation.current?.navigate('Settings'));
act(() => navigation.current?.navigate('Chat'));
waitFor(() => expect(window.location.pathname).toBe('/chat'));
act(() => navigation.current?.navigate('Home'));
jest.runAllTimers();
waitFor(() => expect(window.location.pathname).toBe('/edit'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment