Use test render util

react/jest.config.cjs

@@ -33,7 +33,6 @@ module.exports = {
     '!src/**/*.spec.{js,jsx,ts,tsx}',
     // Exclude test utilities
     '!src/test/**/*',
-    '!src/testUtil.ts',
     '!src/__fixtures__/**/*',
     // Exclude secrets and other files
     '!src/secret_local*ts',

react/src/pages/Callback/Callback.test.tsx

@@ -1,17 +1,9 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-import store from '../../redux/store';
+import { renderInTest } from '@hazmapper/test/testUtil';
 import Callback from './Callback';
 
 test('renders callback', async () => {
-  const { getByText } = render(
-    <Provider store={store}>
-      <MemoryRouter initialEntries={['/callback']}>
-        <Callback />
-      </MemoryRouter>
-    </Provider>
-  );
+  const { getByText } = renderInTest(<Callback />, '/callback');
+
   expect(getByText(/Logging in/)).toBeDefined();
 });

react/src/pages/Login/Login.test.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import Login from './Login';
-import { Provider } from 'react-redux';
-import store from '../../redux/store';
-import { QueryClientProvider } from 'react-query';
-import { testQueryClient } from '../../test/testUtil';
-import { MemoryRouter } from 'react-router';
+import { renderInTest } from '../../test/testUtil';
 
 beforeAll(() => {
   const mockLocation = {
@@ -25,15 +21,7 @@ afterAll(() => {
 });
 
 test('renders login', async () => {
-  const { getByText } = render(
-    <Provider store={store}>
-      <MemoryRouter>
-        <QueryClientProvider client={testQueryClient}>
-          <Login />
-        </QueryClientProvider>
-      </MemoryRouter>
-    </Provider>
-  );
+  const { getByText } = renderInTest(<Login />);
   expect(getByText(/Logging in/)).toBeDefined();
 
   await waitFor(() => {

react/src/pages/MainMenu/MainMenu.test.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { http, HttpResponse } from 'msw';
+import { waitFor } from '@testing-library/react';
 import MainMenu from './MainMenu';
-import { QueryClientProvider } from 'react-query';
-import { testQueryClient, server } from '@hazmapper/test/testUtil';
-import { Provider } from 'react-redux';
-import store from '../../redux/store';
-import { MemoryRouter } from 'react-router-dom';
-import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
-import { systems } from '@hazmapper/__fixtures__/systemsFixture';
+import { renderInTest } from '@hazmapper/test/testUtil';
 
 jest.mock('@hazmapper/hooks/user/useAuthenticatedUser', () => ({
   __esModule: true,
@@ -20,15 +13,7 @@ jest.mock('@hazmapper/hooks/user/useAuthenticatedUser', () => ({
 }));
 
 test('renders menu', async () => {
-  const { getByText } = render(
-    <Provider store={store}>
-      <MemoryRouter>
-        <QueryClientProvider client={testQueryClient}>
-          <MainMenu />
-        </QueryClientProvider>
-      </MemoryRouter>
-    </Provider>
-  );
+  const { getByText } = renderInTest(<MainMenu />);
 
   // Wait for the "Main Menu" text to be rendered and then check it
   await waitFor(() => {

react/src/test/testUtil.tsx

@@ -0,0 +1,33 @@
+import React, { ReactElement } from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { setupServer } from 'msw/node';
+import store from '@hazmapper/redux/store';
+import { defaultHandlers } from '@hazmapper/test/handlers';
+
+export const server = setupServer(...defaultHandlers);
+
+export const testQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      cacheTime: 0,
+      staleTime: 0,
+      useErrorBoundary: true,
+    },
+  },
+});
+
+export function renderInTest(children: ReactElement, path = '/') {
+  return render(
+    <Provider store={store}>
+      <MemoryRouter initialEntries={[path]}>
+        <QueryClientProvider client={testQueryClient}>
+          {children}
+        </QueryClientProvider>
+      </MemoryRouter>
+    </Provider>
+  );
+}