Upgrade to React 18 (#8095)

* Upgrade to React 18

* Update related packages (rebased)

* Increase max asset size for webpack build to pass

* Replace react-hot-loader by @pmmmwh/react-refresh-webpack-plugin

* Revert "Replace react-hot-loader by @pmmmwh/react-refresh-webpack-plugin"

This reverts commit ca7652a21597fad978fec6a553abdd6b71c959f0.

* Upgrade ESLint

* Run linter

* Update all existing tests with legacy rendering

* Update other tests

* Run linting

* Restrore Eslint 8.21.0

* Restore files (Eslint 8.21.0)

* Lint fix

package.json

@@ -23,9 +23,9 @@
     "ajv": "8.6.3",
     "assert": "2.0.0",
     "auth0-js": "9.22.1",
-    "babel-jest": "29.3.1",
+    "babel-jest": "29.7.0",
     "buffer": "6.0.3",
-    "connected-react-router": "6.8.0",
+    "connected-react-router": "6.9.3",
     "crypto-browserify": "3.12.0",
     "d3-color": "3.1.0",
     "d3-scale": "4.0.2",
@@ -44,23 +44,23 @@
     "pako": "2.0.4",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
-    "react": "17.0.2",
-    "react-dates": "21.5.1",
-    "react-dom": "17.0.2",
-    "react-helmet": "6.0.0",
-    "react-highlight-words": "0.16.0",
+    "react": "18.3.1",
+    "react-dates": "21.8.0",
+    "react-dom": "18.3.1",
+    "react-helmet": "6.1.0",
+    "react-highlight-words": "0.20.0",
     "react-hot-keys": "2.5.2",
     "react-hot-loader": "4.13.1",
-    "react-lazylog": "4.4.4",
+    "react-lazylog": "4.5.3",
     "react-linkify": "0.2.2",
     "react-redux": "8.0.7",
     "react-router-dom": "5.1.2",
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",
     "react-table-6": "6.11.0",
-    "react-tabs": "3.0.0",
-    "reactstrap": "8.5.1",
-    "redoc": "2.0.0",
+    "react-tabs": "6.0.2",
+    "reactstrap": "8.10.1",
+    "redoc": "2.1.5",
     "redux": "4.0.5",
     "redux-debounce": "1.0.1",
     "redux-mock-store": "1.5.4",
@@ -75,18 +75,20 @@
     "victory": "36.6.12"
   },
   "devDependencies": {
+    "@babel/core": "7.24.7",
     "@babel/eslint-parser": "7.22.15",
     "@babel/plugin-proposal-class-properties": "7.17.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.17.12",
+    "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.17.12",
     "@pollyjs/adapter-fetch": "5.1.1",
     "@pollyjs/adapter-node-http": "5.1.1",
     "@pollyjs/adapter-puppeteer": "5.1.1",
     "@pollyjs/core": "5.1.1",
     "@pollyjs/persister-fs": "6.0.6",
-    "@testing-library/jest-dom": "6.1.6",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/dom": "10.1.0",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "16.0.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",

tests/ui/job-view/AppHistory_test.jsx

@@ -46,7 +46,11 @@ describe('history', () => {
       },
     );
     fetchMock.get(
-      `begin:${getProjectUrl('/push/?full=true&count=', repoName)}`,
+      `begin:${getProjectUrl('/push/?full=true&count=10&revision=', 'try')}`,
+      { results: [] },
+    );
+    fetchMock.get(
+      `begin:${getProjectUrl('/push/?full=true&count=10', repoName)}`,
       {
         ...pushListFixture,
         results: [pushListFixture.results[0]],
@@ -66,7 +70,7 @@ describe('history', () => {
     history.push(
       '/#/jobs?repo=try&revision=07615c30668c70692d01a58a00e7e271e69ff6f1',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -78,7 +82,7 @@ describe('history', () => {
   });
 
   test('lack of a specified route should redirect to jobs view with a default repo', () => {
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({

tests/ui/job-view/AppRoutes_test.jsx

@@ -7,6 +7,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import App from '../../../ui/App';
 import reposFixture from '../mock/repositories';
 import { getApiUrl } from '../../../ui/helpers/url';
+import { getProjectUrl } from '../../../ui/helpers/location';
 import {
   configureStore,
   history,
@@ -28,6 +29,12 @@ describe('Test for backwards-compatible routes for other apps', () => {
     fetchMock.get('/revision.txt', []);
     fetchMock.get(getApiUrl('/repository/'), reposFixture);
     fetchMock.get(getApiUrl('/failureclassification/'), []);
+    fetchMock.get(getApiUrl('/user/'), []);
+    fetchMock.get(getProjectUrl('/jobs/319893964/', 'autoland'), {});
+    fetchMock.get(
+      getProjectUrl('/jobs/319893964/text_log_errors/', 'autoland'),
+      {},
+    );
   });
 
   test('old push health url should redirect to correct url', () => {
@@ -39,7 +46,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     history.push(
       '/pushhealth.html?repo=autoland&revision=3c8e093335315c42a87eebf0531effe9cd6fdb95',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -56,7 +63,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     fetchMock.get('/api/performance/tag/', []);
 
     history.push('/perf.html#/alerts?id=27285&hideDwnToInv=0');
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -71,7 +78,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     history.push(
       '/logviewer.html#/jobs?job_id=319893964&repo=autoland&lineNumber=2728',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -83,12 +90,10 @@ describe('Test for backwards-compatible routes for other apps', () => {
   });
 
   test('url is not broken when it contains a table permalink hash', async () => {
-    fetchMock.get(getApiUrl('/user/'), []);
-
     history.push(
       '/perfherder/compare?originalProject=mozilla-central&originalRevision=54e7fb66ad44b8dcb8caab587f929dad60932d71&newProject=mozilla-central&newRevision=54e7fb66ad44b8dcb8caab587f929dad60932d71&framework=1&page=1#tableLink-header-134266337',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({

tests/ui/job-view/App_test.jsx

@@ -138,7 +138,7 @@ describe('App', () => {
   });
 
   test('should have links to Perfherder and Intermittent Failures View', async () => {
-    const { getByText, getByAltText } = render(testApp());
+    const { getByText, getByAltText } = render(testApp(), { legacyRoot: true });
     const appMenu = await waitFor(() => getByAltText('Treeherder'));
 
     expect(appMenu).toBeInTheDocument();
@@ -160,7 +160,9 @@ describe('App', () => {
     secondJobSymbol,
     secondJobTaskId,
   ) => {
-    const { getByText, findByText, findByTestId } = render(testApp());
+    const { getByText, findByText, findByTestId } = render(testApp(), {
+      legacyRoot: true,
+    });
     const firstJob = await findByText(firstJobSymbol);
 
     fireEvent.mouseDown(firstJob);
@@ -228,7 +230,7 @@ describe('App', () => {
   });
 
   test('changing repo updates ``currentRepo``', async () => {
-    const { getByText, getByTitle } = render(testApp());
+    const { getByText, getByTitle } = render(testApp(), { legacyRoot: true });
 
     const autolandRevision = await waitFor(() => getByText('ba9c692786e9'));
     expect(autolandRevision).toBeInTheDocument();

tests/ui/job-view/Filtering_test.jsx

@@ -190,9 +190,12 @@ describe('Filtering', () => {
     });
 
     test('should have 1 push', async () => {
-      const { getAllByText, getAllByTestId, getByText, getByTitle } = render(
-        testApp(),
-      );
+      const {
+        getAllByText,
+        getAllByTestId,
+        getByText,
+        getByTitle,
+      } = render(testApp(), { legacyRoot: true });
       const unfilteredPushes = await waitFor(() =>
         getAllByTestId('push-header'),
       );
@@ -216,7 +219,9 @@ describe('Filtering', () => {
 
   describe('by failure result', () => {
     test('should have 10 failures', async () => {
-      const { getByTitle, findAllByText, queryAllByText } = render(testApp());
+      const { getByTitle, findAllByText, queryAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
 
       await findAllByText('B');
       const unclassifiedOnlyButton = getByTitle(
@@ -242,7 +247,9 @@ describe('Filtering', () => {
       expect(jobCount()).toBe(50);
     });
     test('KeyboardShortcut u: toggle unclassified jobs', async () => {
-      const { queryAllByText, getAllByText } = render(testApp());
+      const { queryAllByText, getAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
       const symbolToRemove = 'yaml';
       await waitFor(() => getAllByText(symbolToRemove));
       fireEvent.keyDown(document.body, { key: 'u', keyCode: 85 });
@@ -295,7 +302,9 @@ describe('Filtering', () => {
     };
 
     test('click signature should have 10 jobs', async () => {
-      const { getByTitle, findAllByText } = render(testApp());
+      const { getByTitle, findAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
 
       const build = await findAllByText('B');
 
@@ -311,7 +320,10 @@ describe('Filtering', () => {
     });
 
     test('string "yaml" should have 10 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       await findAllByText('B');
       const filterField = document.querySelector('#quick-filter');
       setFilterText(filterField, 'yaml');
@@ -328,7 +340,7 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut f: focus the quick filter input', async () => {
-      const { findAllByText } = render(testApp());
+      const { findAllByText } = render(testApp(), { legacyRoot: true });
       await findAllByText('B');
 
       const filterField = document.querySelector('#quick-filter');
@@ -344,7 +356,7 @@ describe('Filtering', () => {
         getAllByText,
         getByPlaceholderText,
         queryAllByText,
-      } = render(testApp());
+      } = render(testApp(), { legacyRoot: true });
       await findAllByText('B');
       const filterField = getByPlaceholderText('Filter platforms & jobs');
       setFilterText(filterField, 'yaml');
@@ -373,7 +385,10 @@ describe('Filtering', () => {
     };
 
     test('uncheck success should leave 30 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
 
       await findAllByText('B');
       clickFilterChicklet('green');
@@ -391,7 +406,10 @@ describe('Filtering', () => {
     });
 
     test('uncheck failures should leave 20 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'B';
 
       await findAllByText(symbolToRemove);
@@ -410,7 +428,10 @@ describe('Filtering', () => {
     });
 
     test('uncheck in progress should leave 20 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'yaml';
 
       await findAllByText('B');
@@ -428,7 +449,9 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut i: toggle off in-progress tasks', async () => {
-      const { getAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, queryAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
       const symbolToRemove = 'yaml';
 
       await waitFor(() => getAllByText(symbolToRemove));
@@ -445,7 +468,10 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut i: toggle on in-progress tasks', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'yaml';
 
       await waitFor(() => getAllByText(symbolToRemove));
@@ -473,7 +499,7 @@ describe('Filtering', () => {
         findAllByText,
         findByText,
         queryAllByText,
-      } = render(testApp());
+      } = render(testApp(), { legacyRoot: true });
       const symbolToRemove = 'yaml';
 
       await findAllByText('B');

tests/ui/job-view/PushList_test.jsx

@@ -158,13 +158,13 @@ describe('PushList', () => {
   const push2Id = 'push-511137';
 
   test('should have 2 pushes', async () => {
-    render(testPushList());
+    render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
   });
 
   test('should switch to single loaded revision', async () => {
-    const { getAllByTitle } = render(testPushList());
+    const { getAllByTitle } = render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
     const pushLinks = await getAllByTitle('View only this push');
@@ -175,7 +175,9 @@ describe('PushList', () => {
   });
 
   test('should reload pushes when setting fromchange', async () => {
-    const { queryAllByTestId, queryByTestId } = render(testPushList());
+    const { queryAllByTestId, queryByTestId } = render(testPushList(), {
+      legacyRoot: true,
+    });
 
     expect(await pushCount()).toHaveLength(2);
 
@@ -200,7 +202,7 @@ describe('PushList', () => {
   });
 
   test('should reload pushes when setting tochange', async () => {
-    const { getByTestId } = render(testPushList());
+    const { getByTestId } = render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
 
@@ -223,7 +225,9 @@ describe('PushList', () => {
   });
 
   test('should load N more pushes when click next N', async () => {
-    const { getByTestId, getAllByTestId } = render(testPushList());
+    const { getByTestId, getAllByTestId } = render(testPushList(), {
+      legacyRoot: true,
+    });
     const nextNUrl = (count) =>
       getProjectUrl(`/push/?full=true&count=${count + 1}&push_timestamp__lte=`);
     const clickNext = (count) =>
@@ -272,7 +276,7 @@ describe('PushList', () => {
   });
 
   test('jobs should have fields required for retriggers', async () => {
-    const { getByText } = render(testPushList());
+    const { getByText } = render(testPushList(), { legacyRoot: true });
     const jobEl = await waitFor(() => getByText('yaml'));
     const jobInstance = findJobInstance(jobEl.getAttribute('data-job-id'));
     const { job } = jobInstance.props;

tests/ui/job-view/Push_test.jsx

@@ -165,7 +165,9 @@ describe('Push', () => {
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('jobs should have test_path field to filter', async () => {
     const { store } = configureStore();
-    const { getByText } = render(testPush(store, new FilterModel()));
+    const { getByText } = render(testPush(store, new FilterModel()), {
+      legacyRoot: true,
+    });
 
     const validateJob = async (name, testPaths) => {
       const jobEl = await waitFor(() => getByText(name));

tests/ui/job-view/SecondaryNavBar_test.jsx

@@ -71,7 +71,9 @@ describe('SecondaryNavBar', () => {
       },
       router,
     });
-    const { getByText } = render(testSecondaryNavBar(store));
+    const { getByText } = render(testSecondaryNavBar(store), {
+      legacyRoot: true,
+    });
 
     expect(await waitFor(() => getByText(repoName))).toBeInTheDocument();
     expect(await waitFor(() => getByText('52'))).toBeInTheDocument();
@@ -86,7 +88,9 @@ describe('SecondaryNavBar', () => {
       },
       router,
     });
-    const { getByText } = render(testSecondaryNavBar(store));
+    const { getByText } = render(testSecondaryNavBar(store), {
+      legacyRoot: true,
+    });
 
     expect(await waitFor(() => getByText(repoName))).toBeInTheDocument();
     expect(await waitFor(() => getByText('22'))).toBeInTheDocument();
@@ -106,7 +110,9 @@ describe('SecondaryNavBar', () => {
       updateButtonClick: jest.fn(),
     };
 
-    const { container } = render(testSecondaryNavBar(store, props));
+    const { container } = render(testSecondaryNavBar(store, props), {
+      legacyRoot: true,
+    });
     const el = container.querySelector('#revisionChangedLabel');
     fireEvent.click(el);
     expect(props.updateButtonClick).toHaveBeenCalled();

tests/ui/job-view/bugfiler_test.jsx

@@ -155,7 +155,7 @@ describe('BugFiler', () => {
       search: summary,
     };
 
-    render(bugFilerComponentSuggestion(suggestion));
+    render(bugFilerComponentSuggestion(suggestion), { legacyRoot: true });
     const area = screen.getAllByRole('textbox');
     // TODO: hardcoded '1' in the array index
     // TODO: this used to check specific areas of summary,
@@ -285,8 +285,8 @@ describe('BugFiler', () => {
       },
     ];
 
-    render(bugFilerComponentSuggestions(suggestions));
-    const signatureArea = await screen.getByDisplayValue(
+    render(bugFilerComponentSuggestions(suggestions), { legacyRoot: true });
+    const signatureArea = screen.getByDisplayValue(
       '[@ servo_arc::HeaderSlice<H,T>::slice]',
     );
     expect(signatureArea).toBeInTheDocument();
@@ -302,8 +302,8 @@ describe('BugFiler', () => {
       },
     ];
 
-    render(bugFilerComponentSuggestions(suggestions));
-    const signatureArea = await screen.queryByDisplayValue('test_webvr.html');
+    render(bugFilerComponentSuggestions(suggestions), { legacyRoot: true });
+    const signatureArea = screen.queryByDisplayValue('test_webvr.html');
     expect(signatureArea).toBeNull();
   });
 
@@ -316,10 +316,8 @@ describe('BugFiler', () => {
           'SUMMARY: AddressSanitizer: heap-use-after-free /builds/worker/checkouts/gecko/mock/folder/file.c:12:34 in mock::MockComponent::MockMethod(mock::squirrel::Weasel*)',
       },
     ];
-    render(bugFilerComponentSuggestions(suggestions));
-    const securityIssue = await screen.getByText(
-      'Report this as a security issue',
-    );
+    render(bugFilerComponentSuggestions(suggestions), { legacyRoot: true });
+    const securityIssue = screen.getByText('Report this as a security issue');
     expect(securityIssue).toBeTruthy();
   });
 
@@ -333,10 +331,8 @@ describe('BugFiler', () => {
       },
     ];
 
-    render(bugFilerComponentSuggestions(suggestions));
-    const securityIssue = await screen.getByText(
-      'Report this as a security issue',
-    );
+    render(bugFilerComponentSuggestions(suggestions), { legacyRoot: true });
+    const securityIssue = screen.getByText('Report this as a security issue');
     expect(securityIssue.checked).toBeFalsy();
   });
 
@@ -350,9 +346,9 @@ describe('BugFiler', () => {
   });
 
   test('should strip omitted leads from thisFailure', async () => {
-    const { getByTitle } = render(bugFilerComponentSuggestions(PdfSuggestions));
+    render(bugFilerComponentSuggestions(PdfSuggestions), { legacyRoot: true });
 
-    const toggleSummary = getByTitle('expand');
+    const toggleSummary = screen.getByTitle('expand');
     await fireEvent.click(toggleSummary);
 
     // TODO: hardcoded '2' value - how to get textarea for expanded field

tests/ui/job-view/details/PinBoard_test.jsx

@@ -152,7 +152,7 @@ describe('DetailsPanel', () => {
   };
 
   test('pin selected job with button', async () => {
-    const { getByTitle } = render(testDetailsPanel());
+    const { getByTitle } = render(testDetailsPanel(), { legacyRoot: true });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     fireEvent.click(await waitFor(() => getByTitle('Pin job')));
@@ -166,7 +166,7 @@ describe('DetailsPanel', () => {
   });
 
   test('KeyboardShortcut space: pin selected job', async () => {
-    const { getByTitle } = render(testDetailsPanel());
+    const { getByTitle } = render(testDetailsPanel(), { legacyRoot: true });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     const content = await waitFor(() =>
@@ -182,7 +182,9 @@ describe('DetailsPanel', () => {
   });
 
   test('KeyboardShortcut b: pin selected task and edit bug', async () => {
-    const { getByPlaceholderText } = render(testDetailsPanel());
+    const { getByPlaceholderText } = render(testDetailsPanel(), {
+      legacyRoot: true,
+    });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     const content = await waitFor(() =>
@@ -201,7 +203,9 @@ describe('DetailsPanel', () => {
   });
 
   test('KeyboardShortcut c: pin selected task and edit comment', async () => {
-    const { getByPlaceholderText } = render(testDetailsPanel());
+    const { getByPlaceholderText } = render(testDetailsPanel(), {
+      legacyRoot: true,
+    });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     const content = await waitFor(() =>
@@ -218,7 +222,7 @@ describe('DetailsPanel', () => {
   });
 
   test('KeyboardShortcut ctrl+shift+u: clear PinBoard', async () => {
-    const { getByTitle } = render(testDetailsPanel());
+    const { getByTitle } = render(testDetailsPanel(), { legacyRoot: true });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     fireEvent.click(await waitFor(() => getByTitle('Pin job')));
@@ -238,7 +242,9 @@ describe('DetailsPanel', () => {
   });
 
   test('clear PinBoard', async () => {
-    const { getByTitle, getByText } = render(testDetailsPanel());
+    const { getByTitle, getByText } = render(testDetailsPanel(), {
+      legacyRoot: true,
+    });
     store.dispatch(setSelectedJob(jobList.data[1], true));
 
     fireEvent.click(await waitFor(() => getByTitle('Pin job')));
@@ -255,7 +261,9 @@ describe('DetailsPanel', () => {
   });
 
   test('pin all jobs', async () => {
-    const { queryAllByTitle } = render(testDetailsPanel());
+    const { queryAllByTitle } = render(testDetailsPanel(), {
+      legacyRoot: true,
+    });
     store.dispatch(pinJobs(jobList.data));
     const unPinJobBtns = queryAllByTitle('Unpin job');
     expect(unPinJobBtns).toHaveLength(5);
@@ -267,7 +275,7 @@ describe('DetailsPanel', () => {
       getByText,
       getByTitle,
       queryAllByTitle,
-    } = render(testDetailsPanel());
+    } = render(testDetailsPanel(), { legacyRoot: true });
 
     store.dispatch(pinJobs(jobList.data));
     store.dispatch(setSelectedJob(jobList.data[1], true));

tests/ui/job-view/fuzzy_test.jsx

@@ -55,7 +55,9 @@ describe('FuzzyJobFinder', () => {
   );
 
   test('Fuzzy search gives expected results', async () => {
-    const { getByTitle, queryAllByTestId } = await render(testFuzzyJobFinder);
+    const { getByTitle, queryAllByTestId } = await render(testFuzzyJobFinder, {
+      legacyRoot: true,
+    });
     const inputElement = getByTitle('Filter the list of runnable jobs');
 
     await waitFor(() => {
@@ -84,7 +86,9 @@ describe('FuzzyJobFinder', () => {
   });
 
   test('Fuzzy search gives expected results for extended operators', async () => {
-    const { getByTitle, queryAllByTestId } = await render(testFuzzyJobFinder);
+    const { getByTitle, queryAllByTestId } = await render(testFuzzyJobFinder, {
+      legacyRoot: true,
+    });
     const inputElement = getByTitle('Filter the list of runnable jobs');
 
     await waitFor(() => {

tests/ui/job-view/groups_test.jsx

@@ -55,14 +55,16 @@ describe('JobGroup component', () => {
       Tests Jobs view
    */
   it('collapsed should show a job and count of 2 icon when collapsed', async () => {
-    const { getByTestId } = render(jobGroup(countGroup));
+    const { getByTestId } = render(jobGroup(countGroup), { legacyRoot: true });
 
     const jobGroupCount = await waitFor(() => getByTestId('job-group-count'));
     expect(jobGroupCount).toHaveTextContent('2');
   });
 
   test('should show a job and count of 2 icon when re-collapsed', async () => {
-    const { getByText, getByTestId } = render(jobGroup(countGroup));
+    const { getByText, getByTestId } = render(jobGroup(countGroup), {
+      legacyRoot: true,
+    });
 
     const jobGroupCount = await waitFor(() => getByTestId('job-group-count'));
     expect(jobGroupCount).toHaveTextContent('2');
@@ -78,7 +80,9 @@ describe('JobGroup component', () => {
   });
 
   test('should show jobs, not counts when expanded', async () => {
-    const { getByTestId, getAllByTestId } = render(jobGroup(countGroup));
+    const { getByTestId, getAllByTestId } = render(jobGroup(countGroup), {
+      legacyRoot: true,
+    });
 
     const jobGroupCount = await waitFor(() => getByTestId('job-group-count'));
     expect(jobGroupCount).toHaveTextContent('2');
@@ -95,6 +99,7 @@ describe('JobGroup component', () => {
     const groupCountsExpanded = true;
     const { queryByTestId, getAllByTestId } = render(
       jobGroup(countGroup, groupCountsExpanded),
+      { legacyRoot: true },
     );
 
     const expandedJobs = await waitFor(() => getAllByTestId('job-btn'));
@@ -105,7 +110,7 @@ describe('JobGroup component', () => {
   });
 
   test('should hide duplicates by default', async () => {
-    const { getAllByTestId } = render(jobGroup(dupGroup));
+    const { getAllByTestId } = render(jobGroup(dupGroup), { legacyRoot: true });
 
     const jobGroupCount = await waitFor(() =>
       getAllByTestId('job-group-count'),

tests/ui/job-view/revisions_test.jsx

@@ -83,6 +83,7 @@ describe('Revision list component', () => {
         revisionCount={push.revision_count}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
 
     expect(getAllByTestId('revision')).toHaveLength(push.revision_count);
@@ -99,6 +100,7 @@ describe('Revision list component', () => {
         revisionCount={push.revision_count}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
     expect(getByText('\u2026and more')).toBeInTheDocument();
   });
@@ -112,6 +114,7 @@ describe('Revision item component', () => {
         revision={revision}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
     const revLink = await waitFor(() => getByText('5a110ad242ea'));
 
@@ -130,6 +133,7 @@ describe('Revision item component', () => {
         revision={revision}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
     expect(getByText('AB')).toBeInTheDocument();
   });
@@ -141,6 +145,7 @@ describe('Revision item component', () => {
         revision={revision}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
 
     expect(
@@ -159,6 +164,7 @@ describe('Revision item component', () => {
         revision={revision}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
 
     expect(document.querySelectorAll('.text-danger')).toHaveLength(1);
@@ -173,6 +179,7 @@ describe('Revision item component', () => {
         revision={revision}
         bugSummaryMap={push.bugSummaryMap}
       />,
+      { legacyRoot: true },
     );
 
     expect(document.querySelectorAll('.text-danger')).toHaveLength(1);
@@ -183,6 +190,7 @@ describe('More revisions link component', () => {
   test('renders an "...and more" link', () => {
     const { getByText } = render(
       <MoreRevisionsLink href="http://more.link/" />,
+      { legacyRoot: true },
     );
     const link = getByText('\u2026and more');
 
@@ -191,7 +199,7 @@ describe('More revisions link component', () => {
   });
 
   test('has an external link icon', () => {
-    render(<MoreRevisionsLink href="http://more.link" />);
+    render(<MoreRevisionsLink href="http://more.link" />, { legacyRoot: true });
 
     expect(
       document.querySelectorAll('svg.svg-inline--fa.fa-square-up-right'),
@@ -205,6 +213,7 @@ describe('initials filter', () => {
     const name = 'Starscream';
     const { getByText } = render(
       <AuthorInitials title={`${name}: ${email}`} author={name} />,
+      { legacyRoot: true },
     );
 
     expect(getByText('S')).toBeInTheDocument();
@@ -214,6 +223,7 @@ describe('initials filter', () => {
     const name = 'Optimus Prime';
     const { getByText } = render(
       <AuthorInitials title={`${name}: ${email}`} author={name} />,
+      { legacyRoot: true },
     );
 
     expect(getByText('OP')).toBeInTheDocument();
@@ -223,6 +233,7 @@ describe('initials filter', () => {
     const name = 'Some Other Transformer';
     const { getByText } = render(
       <AuthorInitials title={`${name}: ${email}`} author={name} />,
+      { legacyRoot: true },
     );
 
     expect(getByText('ST')).toBeInTheDocument();

tests/ui/job-view/selected_job_test.jsx

@@ -72,7 +72,7 @@ const testPushJobs = (filtermodel = null) => {
 };
 
 test('select a job updates url', async () => {
-  const { getByText } = render(testPushJobs());
+  const { getByText } = render(testPushJobs(), { legacyRoot: true });
   const spell = getByText('spell');
 
   expect(spell).toBeInTheDocument();
@@ -86,7 +86,7 @@ test('select a job updates url', async () => {
 });
 
 test('filter change keeps selected job visible', async () => {
-  const { getByText, rerender } = render(testPushJobs());
+  const { getByText, rerender } = render(testPushJobs(), { legacyRoot: true });
   const spell = await waitFor(() => getByText('spell'));
   const filterModel = new FilterModel({
     router: { location: history.location },

tests/ui/logviewer/Logviewer_test.jsx

@@ -66,7 +66,7 @@ describe('Logviewer App', () => {
   });
 
   test('should have links to Perfherder and Intermittent Failures View', async () => {
-    const { findByText } = render(testApp());
+    const { findByText } = render(testApp(), { legacyRoot: true });
     const appMenu = await findByText('Logviewer');
 
     expect(appMenu).toBeInTheDocument();
@@ -83,7 +83,7 @@ describe('Logviewer App', () => {
   });
 
   test('should have a show job info button', async () => {
-    const { findByText } = render(testApp());
+    const { findByText } = render(testApp(), { legacyRoot: true });
 
     const showButton = await findByText('Show Job Info');
 

tests/ui/perfherder/alerts-view/alerts_table_row_test.jsx

@@ -55,6 +55,7 @@ const alertTableRowTest = (
         />
       </tbody>
     </table>,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/alerts_test.jsx

@@ -101,6 +101,7 @@ const alertsView = () => {
         />
       </ConnectedRouter>
     </Provider>,
+    { legacyRoot: true },
   );
 };
 
@@ -151,11 +152,12 @@ const alertsViewControls = ({
         />
       </ConnectedRouter>
     </Provider>,
+    { legacyRoot: true },
   );
 };
 
 const tagsList = (tags = []) => {
-  return render(<TagsList tags={tags} />);
+  return render(<TagsList tags={tags} />, { legacyRoot: true });
 };
 
 const modifyAlertSpy = jest.spyOn(mockModifyAlert, 'update');

tests/ui/perfherder/alerts-view/collapsable_rows_test.jsx

@@ -38,6 +38,7 @@ const collapsableRowsTest = () => {
         />
       </tbody>
     </table>,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/magnitude_test.jsx

@@ -11,7 +11,7 @@ testAlert.prev_value = 1383.38;
 testAlert.new_value = 1211.78;
 
 const magnitude = () => {
-  return render(<Magnitude alert={testAlert} />);
+  return render(<Magnitude alert={testAlert} />, { legacyRoot: true });
 };
 
 test('Previous value is abbreviated', async () => {

tests/ui/perfherder/alerts-view/modal_file_bug_test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-// eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
+// eslint-disable-next-line no-unused-vars
 import { getByText } from '@testing-library/dom';
 
 import FileBugModal from '../../../../ui/perfherder/alerts/FileBugModal';
@@ -18,6 +18,7 @@ const testFileBugModal = (handleClose) => {
       title="Bug Number"
       submitButtonText="File Bug"
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/modal_perf_tags_test.jsx

@@ -18,6 +18,7 @@ const testTagsModal = (handleClose) => {
       toggle={handleClose || toggle}
       updateAndClose={() => {}}
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/select_alert_framework_test.jsx

@@ -37,6 +37,7 @@ const testFrameworksDropdown = () => {
       updateOnEnter
       dropdownCol
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/select_alerts_dropdown_test.jsx

@@ -26,6 +26,7 @@ const selectAlertsDropdown = (user) => {
       allSelected={false}
       alertSummary={testAlertSummary}
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/alerts-view/status_dropdown_test.jsx

@@ -45,6 +45,7 @@ const testStatusDropdown = (summaryTags, alertSummary) => {
       performanceTags={testPerformanceTags}
       frameworks={[{ id: 1, name: dummyFrameworkName }]}
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/compare-view/compare_page_title_test.jsx

@@ -25,7 +25,7 @@ const comparePageTitle = (hasSubtests) => {
 afterEach(cleanup);
 
 test('Compare page title includes the platform name with subtest summary when there are subtests', async () => {
-  const { getByText } = render(comparePageTitle(true));
+  const { getByText } = render(comparePageTitle(true), { legacyRoot: true });
 
   const pageTitle = await waitFor(() => getByText(`${title} subtest summary`));
 
@@ -33,7 +33,7 @@ test('Compare page title includes the platform name with subtest summary when th
 });
 
 test('Compare page tab title includes platform name', async () => {
-  render(comparePageTitle(true));
+  render(comparePageTitle(true), { legacyRoot: true });
 
   await waitFor(() => expect(document.title).toBe(defaultPageTitle));
 });

tests/ui/perfherder/compare-view/compare_table_test.jsx

@@ -186,6 +186,7 @@ const compareTableControls = (
       isBaseAggregate,
       mockDataRetrigger,
     ),
+    { legacyRoot: true },
   );
 
 const compareTable = (userLoggedIn, isBaseAggregate = false) =>
@@ -199,6 +200,7 @@ const compareTable = (userLoggedIn, isBaseAggregate = false) =>
       isBaseAggregate={isBaseAggregate}
       projects={projects}
     />,
+    { legacyRoot: true },
   );
 
 const comparePageTitle = () =>
@@ -208,6 +210,7 @@ const comparePageTitle = () =>
       updateParams={() => {}}
       pageTitleQueryParam="Perfherder Compare Revisions"
     />,
+    { legacyRoot: true },
   );
 
 test('toggle buttons should filter results by selected filter', async () => {
@@ -465,7 +468,7 @@ test('retrigger buttons should appear only when the user is logged in', async ()
   expect(retriggerButtons).toHaveLength(0);
 
   // simulate login
-  rerender(compareTableControlsNode(results, true));
+  rerender(compareTableControlsNode(results, true), { legacyRoot: true });
 
   retriggerButtons = queryAllByTitle(compareTableText.retriggerButtonTitle);
   expect(retriggerButtons).toHaveLength(3);
@@ -880,7 +883,9 @@ test(`TableColumnHeader shows the title as expected`, async () => {
       currentSort: 'default',
     },
   };
-  const { queryByText } = render(<TableColumnHeader {...defaultProps} />);
+  const { queryByText } = render(<TableColumnHeader {...defaultProps} />, {
+    legacyRoot: true,
+  });
 
   expect(queryByText('New (score)')).not.toBeInTheDocument();
   expect(queryByText('New')).toBeInTheDocument();

tests/ui/perfherder/dropdown_menu_test.jsx

@@ -24,6 +24,7 @@ const repoDropdownMenuItems = () =>
       pinned={pinned.filter((item) => options.includes(item))}
       updateData={updateData}
     />,
+    { legacyRoot: true },
   );
 
 test('Pinned options are listed first', async () => {

tests/ui/perfherder/graphs-view/graphs_view_test.jsx

@@ -112,6 +112,7 @@ const graphsViewControls = (
         replicates={replicates}
       />
     </Router>,
+    { legacyRoot: true },
   );
 };
 afterEach(cleanup);

tests/ui/perfherder/graphs-view/test_data_modal_test.jsx

@@ -65,6 +65,7 @@ const testDataModel = () => {
       })}
       getSeriesData={mockGetSeriesData}
     />,
+    { legacyRoot: true },
   );
 };
 

tests/ui/perfherder/legend_card_test.jsx

@@ -66,6 +66,7 @@ const legendCard = (
       colors={colors}
       symbols={graphSymbols}
     />,
+    { legacyRoot: true },
   );
 
 afterEach(cleanup);

tests/ui/perfherder/replicates_graph_test.jsx

@@ -200,6 +200,7 @@ const replicatesGraph = (mockedGetData, mockedGetReplicateData) =>
       getData={mockedGetData}
       getReplicateData={mockedGetReplicateData}
     />,
+    { legacyRoot: true },
   );
 
 test('graph with available data displays properly', async () => {

tests/ui/perfherder/retrigger_modal_test.jsx

@@ -22,7 +22,7 @@ const retriggerModal = (
     isBaseAggregate,
     currentRetriggerRow,
   };
-  return render(<RetriggerModal {...props} />);
+  return render(<RetriggerModal {...props} />, { legacyRoot: true });
 };
 
 afterEach(cleanup);

tests/ui/perfherder/selector_card_test.jsx

@@ -35,7 +35,9 @@ const renderReactNode = (getRevisions, updateState, parentState) => (
 );
 
 const selectorCard = (getRevisions, updateState, parentState, ref) =>
-  render(renderReactNode(getRevisions, updateState, parentState, ref));
+  render(renderReactNode(getRevisions, updateState, parentState, ref), {
+    legacyRoot: true,
+  });
 
 test('correct hash for input value is valid', async () => {
   const parentState = { selectedRevision: validHash };

tests/ui/perfherder/table_view_test.jsx

@@ -33,6 +33,7 @@ const tableView = (
       highlightedRevisions={highlightedRevisions}
       projects={projects}
     />,
+    { legacyRoot: true },
   );
 
 afterEach(cleanup);

tests/ui/push-health/Action_test.jsx

@@ -23,7 +23,10 @@ describe('Action', () => {
   );
 
   test('should group by test path', async () => {
-    const { getAllByTestId } = render(testAction(tests, jobs, 'path', 'count'));
+    const { getAllByTestId } = render(
+      testAction(tests, jobs, 'path', 'count'),
+      { legacyRoot: true },
+    );
 
     expect(await waitFor(() => getAllByTestId('test-grouping'))).toHaveLength(
       3,
@@ -33,6 +36,7 @@ describe('Action', () => {
   test('should group by platform', async () => {
     const { getAllByTestId } = render(
       testAction(tests, jobs, 'platform', 'count'),
+      { legacyRoot: true },
     );
 
     expect(await waitFor(() => getAllByTestId('test-grouping'))).toHaveLength(
@@ -41,7 +45,10 @@ describe('Action', () => {
   });
 
   test('should bold the test file', async () => {
-    const { getAllByTestId } = render(testAction(tests, jobs, 'path', 'count'));
+    const { getAllByTestId } = render(
+      testAction(tests, jobs, 'path', 'count'),
+      { legacyRoot: true },
+    );
 
     expect(
       await waitFor(() => getAllByTestId('group-slash-bolded')),

tests/ui/push-health/ClassificationGroup_test.jsx

@@ -25,7 +25,9 @@ describe('ClassificationGroup', () => {
   );
 
   test('should group by test path', async () => {
-    const { getAllByTestId } = render(testClassificationGroup(tests, 'path'));
+    const { getAllByTestId } = render(testClassificationGroup(tests, 'path'), {
+      legacyRoot: true,
+    });
 
     expect(await waitFor(() => getAllByTestId('test-grouping'))).toHaveLength(
       3,
@@ -35,6 +37,7 @@ describe('ClassificationGroup', () => {
   test('should group by platform', async () => {
     const { getAllByTestId } = render(
       testClassificationGroup(tests, 'platform'),
+      { legacyRoot: true },
     );
 
     expect(await waitFor(() => getAllByTestId('test-grouping'))).toHaveLength(

tests/ui/push-health/CommitHistory_test.jsx

@@ -33,7 +33,9 @@ describe('CommitHistory', () => {
 
   test('should show the push header and the author', () => {
     const { details: commitHistory } = pushHealth.metrics.commitHistory;
-    const { getByTestId } = render(testCommitHistory(commitHistory));
+    const { getByTestId } = render(testCommitHistory(commitHistory), {
+      legacyRoot: true,
+    });
     const headerText = getByTestId('headerText');
     const authorTime = getByTestId('authorTime');
 
@@ -51,6 +53,7 @@ describe('CommitHistory', () => {
     const { details: commitHistory } = pushHealth.metrics.commitHistory;
     const { getByText, getByTestId, queryByTestId } = render(
       testCommitHistory(commitHistory),
+      { legacyRoot: true },
     );
     const parentLink = getByTestId('parent-commit-sha');
 
@@ -76,6 +79,7 @@ describe('CommitHistory', () => {
 
     const { getByText, getByTestId, queryByTestId } = render(
       testCommitHistory(commitHistory),
+      { legacyRoot: true },
     );
     expect(
       getByText(
@@ -106,6 +110,7 @@ describe('CommitHistory', () => {
 
     const { getByText, queryByTestId } = render(
       testCommitHistory(commitHistory),
+      { legacyRoot: true },
     );
     expect(
       await waitFor(() =>

tests/ui/push-health/Health_test.jsx

@@ -133,7 +133,7 @@ describe('Health', () => {
   test('should show some grouped tests', async () => {
     history.push(`/push-health?repo=${repo}&revision=${revision}`);
 
-    const health = render(testHealth());
+    const health = render(testHealth(), { legacyRoot: true });
     const classificationGroups = await waitFor(() =>
       health.getAllByTestId('classification-group'),
     );
@@ -154,7 +154,7 @@ describe('Health', () => {
     history.push(
       `/push-health?repo=${repo}&revision=${revision}&searchStr=browser/extensions/`,
     );
-    const health = render(testHealth());
+    const health = render(testHealth(), { legacyRoot: true });
     const classificationGroups = await waitFor(() =>
       health.getAllByTestId('classification-group'),
     );

tests/ui/push-health/MyPushes_test.jsx

@@ -50,7 +50,9 @@ describe('My Pushes', () => {
   };
 
   test('should show message if no author query param is provided and user is not logged in', async () => {
-    const { queryByText } = render(testMyPushes({ isLoggedIn: false }));
+    const { queryByText } = render(testMyPushes({ isLoggedIn: false }), {
+      legacyRoot: true,
+    });
 
     // verify no author query param exists
     expect(history.location.search).toBe('');
@@ -61,7 +63,7 @@ describe('My Pushes', () => {
   });
 
   test('should fetch the push health data if user is logged in and update query param', async () => {
-    const { getAllByText } = render(testMyPushes());
+    const { getAllByText } = render(testMyPushes(), { legacyRoot: true });
 
     const pushes = await waitFor(() => getAllByText(testUser.email));
     expect(pushes).toHaveLength(3);
@@ -73,6 +75,7 @@ describe('My Pushes', () => {
     history.location.search = `?author=${testUser.email}`;
     const { getAllByText } = render(
       testMyPushes({ email: '', isLoggedIn: false }),
+      { legacyRoot: true },
     );
 
     const pushes = await waitFor(() => getAllByText(testUser.email));
@@ -81,7 +84,9 @@ describe('My Pushes', () => {
   });
 
   test('should filter pushes by repos', async () => {
-    const { getByText, getAllByTestId, queryByText } = render(testMyPushes());
+    const { getByText, getAllByTestId, queryByText } = render(testMyPushes(), {
+      legacyRoot: true,
+    });
 
     const tryPushes = await waitFor(() => getAllByTestId('header-repo'));
     expect(tryPushes).toHaveLength(3);

tests/ui/push-health/PlatformConfig_test.jsx

@@ -79,7 +79,9 @@ describe('PlatformConfig', () => {
   );
 
   test('should show the test name', async () => {
-    const { getByText } = render(testPlatformConfig(testFailure, jobs));
+    const { getByText } = render(testPlatformConfig(testFailure, jobs), {
+      legacyRoot: true,
+    });
 
     expect(
       await waitFor(() =>
@@ -91,13 +93,17 @@ describe('PlatformConfig', () => {
   });
 
   test('should not show details by default', async () => {
-    const { queryByTestId } = render(testPlatformConfig(testFailure, jobs));
+    const { queryByTestId } = render(testPlatformConfig(testFailure, jobs), {
+      legacyRoot: true,
+    });
 
     expect(queryByTestId('log-lines')).toBeNull();
   });
 
   test('should show bug suggestions when expander clicked', async () => {
-    const { getByText } = render(testPlatformConfig(testFailure, jobs));
+    const { getByText } = render(testPlatformConfig(testFailure, jobs), {
+      legacyRoot: true,
+    });
     const detailsButton = getByText('task');
 
     fireEvent.click(detailsButton);
@@ -110,7 +116,9 @@ describe('PlatformConfig', () => {
   });
 
   test('should show artifacts when tab clicked', async () => {
-    const { getByText } = render(testPlatformConfig(testFailure, jobs));
+    const { getByText } = render(testPlatformConfig(testFailure, jobs), {
+      legacyRoot: true,
+    });
     const detailsButton = getByText('task');
 
     fireEvent.click(detailsButton);

tests/ui/push-health/TestMetric_test.jsx

@@ -25,7 +25,9 @@ describe('TestMetric', () => {
   );
 
   test('should have a Possible Regressions section', async () => {
-    const { getByText } = render(testTestMetric(tests, jobs));
+    const { getByText } = render(testTestMetric(tests, jobs), {
+      legacyRoot: true,
+    });
 
     expect(
       await waitFor(() => getByText('Possible Regressions', { exact: false })),
@@ -33,7 +35,9 @@ describe('TestMetric', () => {
   });
 
   test('should have a Known Issues section', async () => {
-    const { getByText } = render(testTestMetric(tests, jobs));
+    const { getByText } = render(testTestMetric(tests, jobs), {
+      legacyRoot: true,
+    });
 
     expect(
       await waitFor(() => getByText('Known Issues', { exact: false })),
@@ -41,7 +45,9 @@ describe('TestMetric', () => {
   });
 
   test('should show the test name', async () => {
-    const { getByText } = render(testTestMetric(tests, jobs));
+    const { getByText } = render(testTestMetric(tests, jobs), {
+      legacyRoot: true,
+    });
 
     expect(
       await waitFor(() =>

tests/ui/push-health/Usage_test.jsx

@@ -35,14 +35,14 @@ describe('Usage', () => {
   const revision = 'bdb000dbec165634372c03ad2a8692ed81bf98a1';
 
   test('should show 10 facets', async () => {
-    const { getAllByTestId } = render(testUsage());
+    const { getAllByTestId } = render(testUsage(), { legacyRoot: true });
     const facets = await waitFor(() => getAllByTestId('facet-link'));
 
     expect(facets).toHaveLength(10);
   });
 
   test('should show details about each revision', async () => {
-    const { getByTestId } = render(testUsage());
+    const { getByTestId } = render(testUsage(), { legacyRoot: true });
     const facet = await waitFor(() => getByTestId(`facet-${revision}`));
     const { children } = facet;
 

tests/ui/push-health/details/DetailsPanel_test.jsx

@@ -83,7 +83,9 @@ describe('DetailsPanel', () => {
   );
 
   test('should have artifacts', async () => {
-    const { getAllByTestId, findByText } = render(testDetailsPanel(task));
+    const { getAllByTestId, findByText } = render(testDetailsPanel(task), {
+      legacyRoot: true,
+    });
     const artifactsTab = await findByText('Artifacts and Debugging Tools');
 
     fireEvent.click(artifactsTab);
@@ -94,7 +96,9 @@ describe('DetailsPanel', () => {
   });
 
   test('should have bug suggestions', async () => {
-    const { getAllByTestId, findByText } = render(testDetailsPanel(task));
+    const { getAllByTestId, findByText } = render(testDetailsPanel(task), {
+      legacyRoot: true,
+    });
     const failuresTab = await findByText('Failure Summary');
 
     fireEvent.click(failuresTab);
@@ -105,7 +109,9 @@ describe('DetailsPanel', () => {
   });
 
   test('should have a log viewer with custom buttons', async () => {
-    const { findByText, getByText } = render(testDetailsPanel(task));
+    const { findByText, getByText } = render(testDetailsPanel(task), {
+      legacyRoot: true,
+    });
     const LogViewerTab = await findByText('Log Viewer');
 
     fireEvent.click(LogViewerTab);

tests/ui/shared/FailureSummaryTab_test.jsx

@@ -72,7 +72,9 @@ describe('FailureSummaryTab', () => {
   );
 
   test('failures should be visible', async () => {
-    const { findByText } = render(testFailureSummaryTab());
+    const { findByText } = render(testFailureSummaryTab(), {
+      legacyRoot: true,
+    });
 
     expect(
       await findByText(
@@ -82,7 +84,9 @@ describe('FailureSummaryTab', () => {
   });
 
   test('suggested duplicate bugs should mention open bug', async () => {
-    const { findByText } = render(testFailureSummaryTab());
+    const { findByText } = render(testFailureSummaryTab(), {
+      legacyRoot: true,
+    });
 
     await waitFor(() => screen.getAllByText('Show more bug suggestions'));
     fireEvent.click(screen.getAllByText('Show more bug suggestions')[1]);
@@ -93,7 +97,9 @@ describe('FailureSummaryTab', () => {
   });
 
   test('suggested non-duplicate bugs should not mention other bug like duplicates do', async () => {
-    const { findByText } = render(testFailureSummaryTab());
+    const { findByText } = render(testFailureSummaryTab(), {
+      legacyRoot: true,
+    });
 
     await waitFor(() => screen.getAllByText('Show more bug suggestions'));
     fireEvent.click(screen.getAllByText('Show more bug suggestions')[1]);
@@ -104,7 +110,9 @@ describe('FailureSummaryTab', () => {
   });
 
   test('classification with match to duplicate bug should put open bug into pinboard', async () => {
-    const { findByText } = render(testFailureSummaryTab());
+    const { findByText } = render(testFailureSummaryTab(), {
+      legacyRoot: true,
+    });
 
     await waitFor(() => screen.getAllByText('Show more bug suggestions'));
     fireEvent.click(screen.getAllByText('Show more bug suggestions')[1]);

tests/ui/test-setup.js

@@ -36,3 +36,5 @@ jest.mock('taskcluster-client-web', () => {
     }),
   };
 });
+
+jest.setTimeout(10000);

ui/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
@@ -7,4 +7,5 @@ import './css/treeherder-custom-styles.css';
 import './css/treeherder-navbar.css';
 import './css/treeherder-base.css';
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

webpack.config.js

@@ -246,7 +246,7 @@ const productionConfig = {
 
   performance: {
     hints: 'error',
-    maxAssetSize: 2200000,
+    maxAssetSize: 2300000,
     maxEntrypointSize: 3000000,
   },