Replace eslint-config-react-app #1379

.eslintrc.cjs

@@ -7,8 +7,9 @@ module.exports = {
     node: true,
   },
   extends: [
-    'react-app',
+    'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/stylistic',
     'prettier',
@@ -29,6 +30,20 @@ module.exports = {
     ],
     // disable for all files - this means we can have plain JS files not causing errors
     '@typescript-eslint/explicit-function-return-type': 'off',
+    // Emulate typescript style for unused variables, see
+    // https://typescript-eslint.io/rules/no-unused-vars/
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
   },
   overrides: [
     {
@@ -44,6 +59,10 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/?*test.*'],
+      extends: ['plugin:testing-library/react'],
+    },
   ],
   parserOptions: {
     ecmaFeatures: {

package.json

@@ -123,7 +123,9 @@
     "cross-env": "7.0.3",
     "cypress": "13.6.4",
     "eslint": "8.56.0",
-    "eslint-config-react-app": "7.0.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.0",
     "jsdom": "^24.0.0",
     "lint-staged": "15.2.0",
     "redux-mock-store": "1.5.4",
@@ -133,4 +135,4 @@
     "wait-on": "7.2.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/App.test.tsx

@@ -64,6 +64,7 @@ describe('App', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     const root = createRoot(div);
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       root.render(<App useSuspense={false} />);
     });
@@ -115,8 +116,9 @@ describe('App', () => {
     });
 
     // go to plugin page
-    await fireEvent.click(screen.getByRole('link', { name: 'Test plugin' }));
+    fireEvent.click(screen.getByRole('link', { name: 'Test plugin' }));
 
+    // eslint-disable-next-line testing-library/no-node-access
     expect(document.getElementById('test_plugin')).toBeInTheDocument();
 
     expect(screen.queryByText('Maintenance')).not.toBeInTheDocument();

src/adminPage/maintenancePage.component.test.tsx

@@ -80,14 +80,14 @@ describe('maintenance page component', () => {
 
     await waitFor(() => {
       expect(store.getActions().length).toEqual(1);
-      expect(store.getActions()[0]).toEqual(
-        loadScheduledMaintenanceState({
-          show: true,
-          message: 'test',
-          severity: 'information',
-        })
-      );
     });
+    expect(store.getActions()[0]).toEqual(
+      loadScheduledMaintenanceState({
+        show: true,
+        message: 'test',
+        severity: 'information',
+      })
+    );
   });
 
   it('setMaintenanceState action should be sent when the setMaintenanceState function is called', async () => {

src/authentication/baseAuthProvider.tsx

@@ -37,7 +37,7 @@ export default abstract class BaseAuthProvider implements AuthProvider {
           user.isAdmin = tokenObject.userIsAdmin;
           return user;
         }
-      } catch (TypeError) {
+      } catch (_err) {
         // not a valid JWT, token has likely been tampered with in some way (or we are running tests)
         console.error('Invalid token: failed to authenticate');
       }

src/hooks/useAnchor.test.tsx

@@ -93,6 +93,7 @@ describe('useAnchor', () => {
           } as unknown as HTMLDivElement)
     );
     // another element with ID "other", which is obv != fragment
+    // eslint-disable-next-line testing-library/no-node-access
     const otherElem = document.getElementById('other');
 
     render(

src/loginPage/loginPage.component.test.tsx

@@ -368,21 +368,21 @@ describe('Login page component', () => {
 
     await waitFor(() => {
       expect(dispatchEventSpy).toHaveBeenCalled();
-      expect(events.length).toEqual(1);
-      expect(events[0].detail).toEqual({
-        type: NotificationType,
-        payload: {
-          message:
-            'It is not possible to authenticate you at the moment. Please, try again later',
-          severity: 'error',
-        },
-      });
-
-      expect(log.error).toHaveBeenCalled();
-      expect(vi.mocked(log.error).mock.calls[0][0]).toEqual(
-        'It is not possible to authenticate you at the moment. Please, try again later'
-      );
     });
+    expect(events.length).toEqual(1);
+    expect(events[0].detail).toEqual({
+      type: NotificationType,
+      payload: {
+        message:
+          'It is not possible to authenticate you at the moment. Please, try again later',
+        severity: 'error',
+      },
+    });
+
+    expect(log.error).toHaveBeenCalled();
+    expect(vi.mocked(log.error).mock.calls[0][0]).toEqual(
+      'It is not possible to authenticate you at the moment. Please, try again later'
+    );
   });
 
   it('on submit verification method should be called with username and password arguments', async () => {

src/mainAppBar/mainAppBar.component.test.tsx

@@ -474,7 +474,7 @@ describe('Main app bar component', () => {
       expect(
         screen.getByRole('button', { name: 'Open notification menu' })
       ).toBeInTheDocument();
-      expect(screen.queryByTestId('NotificationsIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('NotificationsIcon')).toBeInTheDocument();
       expect(
         screen.getByRole('button', { name: 'Open user menu' })
       ).toBeInTheDocument();

src/routing/authorisedRoute.component.test.tsx

@@ -70,7 +70,7 @@ describe('AuthorisedRoute component', () => {
     const testStore = mockStore(state);
 
     const AuthorisedComponent = withAuth(admin)(componentToProtect);
-    const result = render(
+    const view = render(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <Router history={history}>
@@ -85,7 +85,7 @@ describe('AuthorisedRoute component', () => {
     return {
       history,
       testStore: testStore,
-      ...result,
+      ...view,
     };
   };
 
@@ -135,7 +135,7 @@ describe('AuthorisedRoute component', () => {
     };
 
     const AuthorisedComponent = withAuth(admin)(componentToProtect);
-    const result = render(
+    const view = render(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <Router history={history}>
@@ -149,7 +149,7 @@ describe('AuthorisedRoute component', () => {
 
     return {
       history,
-      ...result,
+      ...view,
       ...utils,
     };
   };

src/state/actions/scigateway.actions.test.tsx

@@ -475,7 +475,7 @@ describe('scigateway actions', () => {
     };
 
     document.addEventListener = vi.fn(
-      (id: string, inputHandler: (event: Event) => void) => {
+      (_id: string, inputHandler: (event: Event) => void) => {
         inputHandler(new CustomEvent('test', { detail: registerRouteAction }));
       }
     );

src/state/middleware/scigateway.middleware.test.tsx

@@ -114,7 +114,7 @@ describe('scigateway middleware', () => {
     };
 
     document.addEventListener = vi.fn(
-      (id: string, inputHandler: (event: Event) => void) => {
+      (_id: string, inputHandler: (event: Event) => void) => {
         handler = inputHandler;
       }
     );

src/state/middleware/scigateway.middleware.tsx

@@ -27,6 +27,7 @@ import { push } from 'connected-react-router';
 import { ThunkDispatch } from 'redux-thunk';
 import * as singleSpa from 'single-spa';
 import { getAppStrings, getString } from '../strings';
+import { Theme } from '@mui/material';
 
 const microFrontendMessageId = 'scigateway';
 
@@ -65,6 +66,25 @@ const toastrMessage = (
   }
 };
 
+const generateTheme = (primaryColour?: string): Theme => {
+  let darkModePreference: boolean;
+  const darkModeLocalStorage = localStorage.getItem('darkMode');
+  if (darkModeLocalStorage) {
+    darkModePreference = darkModeLocalStorage === 'true' ? true : false;
+  } else {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModePreference = mq.matches;
+  }
+  const highContrastModePreference: boolean =
+    localStorage.getItem('highContrastMode') === 'true' ? true : false;
+
+  return buildTheme(
+    darkModePreference,
+    highContrastModePreference,
+    primaryColour
+  );
+};
+
 export const listenToPlugins = (
   dispatch: Dispatch,
   getState: () => StateType
@@ -133,24 +153,10 @@ export const listenToPlugins = (
             singleSpa.triggerAppChange();
           }
 
-          let darkModePreference: boolean;
-          const darkModeLocalStorage = localStorage.getItem('darkMode');
-          if (darkModeLocalStorage) {
-            darkModePreference = darkModeLocalStorage === 'true' ? true : false;
-          } else {
-            const mq = window.matchMedia('(prefers-color-scheme: dark)');
-            darkModePreference = mq.matches;
-          }
-          const highContrastModePreference: boolean =
-            localStorage.getItem('highContrastMode') === 'true' ? true : false;
-
-          const theme = buildTheme(
-            darkModePreference,
-            highContrastModePreference,
-            getState().scigateway.primaryColour
-          );
           // Send theme options once registered.
-          dispatch(sendThemeOptions(theme));
+          dispatch(
+            sendThemeOptions(generateTheme(getState().scigateway.primaryColour))
+          );
 
           break;