Upgrade testing-library dependencies

Author: zwliew

website/package.json

@@ -38,9 +38,10 @@
     "@packtracker/webpack-plugin": "2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/user-event": "12.8.3",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/body-scroll-lock": "2.6.2",
     "@types/enzyme": "3.10.18",
     "@types/jest": "29.5.14",

website/src/test-utils/renderWithRouterMatch.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import type { RenderOptions } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { Route, Router } from 'react-router-dom';
 import createHistory from './createHistory';
@@ -18,12 +19,14 @@ export default function renderWithRouterMatch(
     path?: string;
     location?: Parameters<typeof createHistory>[0];
   },
+  renderOptions?: Omit<RenderOptions, 'queries'> | undefined,
 ) {
   const { history } = createHistory(location);
   const view = render(
     <Router history={history}>
       <Route path={path}>{children}</Route>
     </Router>,
+    renderOptions,
   );
   return {
     history,

website/src/views/errors/ModuleFinderApiError.test.tsx

@@ -46,7 +46,7 @@ describe(ModuleFinderApiError, () => {
       push: jest.fn(),
     };
     const tryAgainButton = getByRole('button');
-    userEvent.click(tryAgainButton);
+    await userEvent.click(tryAgainButton);
     expect(searchkit.history.push).toHaveBeenCalled();
     expect(history.location.pathname).toBe('/modules');
     expect(history.location.search).toBe('?q=GER1000&sem[0]=1&sem[1]=2&sem[2]=3&sem[3]=4');

website/src/views/layout/GlobalSearchContainer.test.tsx

@@ -81,22 +81,22 @@ describe('GlobalSearchContainer', () => {
     expect(mockedFetchVenueList).toHaveBeenCalled();
   });
 
-  test('shows no choices when search is too short', () => {
+  test('shows no choices when search is too short', async () => {
     const { getByRole, queryAllByRole } = make();
 
     // Expect not to show choices when search string is too short
-    userEvent.type(getByRole('textbox'), '1');
+    await userEvent.type(getByRole('textbox'), '1');
     expect(queryAllByRole('option')).toHaveLength(0);
 
     // Expect to show choices when search string is long enough
-    userEvent.type(getByRole('textbox'), '1');
+    await userEvent.type(getByRole('textbox'), '1');
     expect(queryAllByRole('option')).not.toHaveLength(0);
   });
 
-  test('shows at most 10 choices when there are many venues and modules', () => {
+  test('shows at most 10 choices when there are many venues and modules', async () => {
     const { getByRole, getAllByRole } = make();
     // Space is intentional - min chars needed to trigger search is 2, so you need an additional character.
-    userEvent.type(getByRole('textbox'), '1 ');
+    await userEvent.type(getByRole('textbox'), '1 ');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Courses",
@@ -115,11 +115,11 @@ describe('GlobalSearchContainer', () => {
     `);
   });
 
-  test('prioritize showing venues when there are many venues even if there are modules', () => {
+  test('prioritize showing venues when there are many venues even if there are modules', async () => {
     const { getByRole, getAllByRole } = make({
       moduleBank: { moduleList: MODULES.slice(0, 5) },
     });
-    userEvent.type(getByRole('textbox'), '1 ');
+    await userEvent.type(getByRole('textbox'), '1 ');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Venues",
@@ -153,11 +153,11 @@ describe('GlobalSearchContainer', () => {
     `);
   });
 
-  test('shows at most 10 choices when there are many modules', () => {
+  test('shows at most 10 choices when there are many modules', async () => {
     const { getByRole, getAllByRole } = make({
       venueBank: { venueList: VENUES.slice(0, 2) },
     });
-    userEvent.type(getByRole('textbox'), '1 ');
+    await userEvent.type(getByRole('textbox'), '1 ');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Courses",
@@ -176,9 +176,9 @@ describe('GlobalSearchContainer', () => {
     `);
   });
 
-  test('shows all results when there are few', () => {
+  test('shows all results when there are few', async () => {
     const { getByRole, getAllByRole } = make();
-    userEvent.type(getByRole('textbox'), 'AA');
+    await userEvent.type(getByRole('textbox'), 'AA');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Courses",
@@ -189,12 +189,12 @@ describe('GlobalSearchContainer', () => {
     `);
   });
 
-  test('show many results if the search only returns modules', () => {
+  test('show many results if the search only returns modules', async () => {
     const { getByRole, getAllByRole } = make({
       venueBank: { venueList: range(100).map((n) => `Venue ${n}`) },
     });
 
-    userEvent.type(getByRole('textbox'), '1010');
+    await userEvent.type(getByRole('textbox'), '1010');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Courses",
@@ -272,12 +272,12 @@ describe('GlobalSearchContainer', () => {
     `);
   });
 
-  test('show many results if the search only returns venues', () => {
+  test('show many results if the search only returns venues', async () => {
     const { getByRole, getAllByRole } = make({
       venueBank: { venueList: range(100).map((n) => `Venue ${n}`) },
     });
 
-    userEvent.type(getByRole('textbox'), 'venue');
+    await userEvent.type(getByRole('textbox'), 'venue');
     expect(getAllByRole('option').map((elem) => elem.textContent)).toMatchInlineSnapshot(`
       [
         "View All Venues",

website/src/views/timetable/TimetableContainer.test.tsx

@@ -1,4 +1,5 @@
 import { screen, waitFor } from '@testing-library/react';
+import type { RenderOptions } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import axios, { AxiosHeaders, AxiosResponse } from 'axios';
 import { produce } from 'immer';
@@ -48,11 +49,17 @@ const relevantStoreContents = {
 
 const initialState = reducers(undefined, initAction());
 
-function make(location: string, storeOverrides: Partial<typeof relevantStoreContents> = {}) {
+function make(
+  location: string,
+  options: {
+    storeOverrides?: Partial<typeof relevantStoreContents>;
+    renderOptions?: Omit<RenderOptions, 'queries'> | undefined;
+  } = {},
+) {
   const { store } = configureStore(
     produce(initialState, (draft) => {
       draft.app.activeSemester =
-        storeOverrides.app?.activeSemester ?? relevantStoreContents.app.activeSemester;
+        options.storeOverrides?.app?.activeSemester ?? relevantStoreContents.app.activeSemester;
     }),
   );
 
@@ -69,6 +76,7 @@ function make(location: string, storeOverrides: Partial<typeof relevantStoreCont
         path: '/timetable/:semester?/:action?',
         location,
       },
+      options.renderOptions,
     ),
   };
 }
@@ -94,7 +102,9 @@ describe(TimetableContainerComponent, () => {
     // Use for-of loop as we `waitFor` must be executed sequentially.
     // eslint-disable-next-line no-restricted-syntax
     for (const semester of semesters) {
-      const { history } = make('/timetable', { app: { activeSemester: semester } });
+      const { history } = make('/timetable', {
+        storeOverrides: { app: { activeSemester: semester } },
+      });
       // eslint-disable-next-line no-await-in-loop
       await waitFor(() => expect(history.location.pathname).toBe(timetablePage(semester)));
     }
@@ -176,10 +186,11 @@ describe(TimetableContainerComponent, () => {
     expect(screen.getByRole('button', { name: 'Import' })).toBeInTheDocument();
   });
 
-  test('should display saved timetable when there is no imported timetable', () => {
+  test('should display saved timetable when there is no imported timetable', async () => {
     const semester = 1;
     const location = timetablePage(semester);
-    const { store } = make(location);
+    // TODO: Get this test to work with the new createRoot API, i.e. legacyRoot = false.
+    const { store } = make(location, { renderOptions: { legacyRoot: true } });
 
     // Populate moduleBank using "succeeded" requests-middleware requests
     store.dispatch({ type: SUCCESS_KEY(FETCH_MODULE), payload: CS1010S });