🚧 progress: Correctly await navigation in tests.

imports/_test/fixtures.ts

@@ -111,17 +111,17 @@ const forgetHistory = async () => {
 };
 
 const mount = isAppTest()
-	? () => {
-			_router.navigate('/');
+	? async () => {
+			await _router.navigate('/');
 	  }
 	: // eslint-disable-next-line @typescript-eslint/no-empty-function
-	  () => {};
+	  async () => {};
 
 const unmount = isAppTest()
-	? () => {
-			_router.navigate('/_test/unmount');
+	? async () => {
+			await _router.navigate('/_test/unmount');
 	  }
-	: () => {
+	: async () => {
 			_unmount();
 	  };
 
@@ -136,9 +136,9 @@ export const client = (title, fn) => {
 	if (Meteor.isClient) {
 		const cleanup = async () => {
 			await logout();
-			unmount();
+			await unmount();
 			assertChangeStreamWatchersAreOff();
-			mount();
+			await mount();
 			await call(reset);
 		};
 

imports/ui/App.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import {
 	BrowserRouter,
 	Routes,
 	Route,
 	useNavigate,
-	type NavigateFunction,
 	type Path,
+	type NavigateOptions,
+	type To,
 } from 'react-router-dom';
 
 import {CacheProvider} from '@emotion/react';
@@ -19,6 +20,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 
 import isTest from '../app/isTest';
 
+import createPromise from '../lib/async/createPromise';
+
 import DateTimeLocalizationProvider from './i18n/DateTimeLocalizationProvider';
 import CustomWholeWindowDropZone from './input/CustomWholeWindowDropZone';
 import ModalProvider from './modal/ModelProvider';
@@ -33,21 +36,47 @@ export const muiCache = createCache({
 	prepend: true,
 });
 
+export type NavigateFunction = {
+	(to: To, options?: NavigateOptions): Promise<void>;
+	(delta: number): Promise<void>;
+};
+
 export const _router: {navigate: NavigateFunction} = {
-	navigate(_to: Partial<Path> | string | number) {
+	async navigate(_to: Partial<Path> | string | number) {
 		console.warn('Using unitialized test-only _navigate function call.');
 	},
 };
 
+const useNavigationEffect = () => {
+	const navigate = useNavigate();
+	useEffect(() => {
+		const _navigation = createPromise<void>();
+		_router.navigate = async (to: any) => {
+			navigate(to);
+			await _navigation.promise;
+		};
+
+		return () => {
+			_navigation.resolve();
+		};
+	}, [navigate]);
+};
+
+const UnmountRoute = () => {
+	useNavigationEffect();
+	return <div>test-only unmount route</div>;
+};
+
+const MainRoute = ({children}) => {
+	useNavigationEffect();
+	return {...children};
+};
+
 const WithTestRoutes = ({children}) => {
-	_router.navigate = useNavigate();
 	return (
 		<Routes>
-			<Route
-				element={<div>test-only unmount route</div>}
-				path="/_test/unmount"
-			/>
-			<Route element={{...children}} path="*" />
+			<Route element={<UnmountRoute />} path="/_test/unmount" />
+			<Route element={<MainRoute>{children}</MainRoute>} path="*" />
 		</Routes>
 	);
 };