Migrate scigateway tests to testing-library

package.json

@@ -85,9 +85,6 @@
     "extends": "react-app"
   },
   "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "collectCoverageFrom": [
       "src/**/*.{tsx,js,jsx,ts}",
       "!src/index.tsx",
@@ -116,14 +113,11 @@
     "@types/redux-mock-store": "1.0.2",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "@typescript-eslint/parser": "5.49.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
     "axios-mock-adapter": "1.21.1",
     "babel-eslint": "10.1.0",
     "concurrently": "7.6.0",
     "cross-env": "7.0.3",
     "cypress": "12.3.0",
-    "enzyme": "3.11.0",
-    "enzyme-to-json": "3.6.2",
     "eslint": "8.33.0",
     "eslint-config-react-app": "7.0.0",
     "lint-staged": "13.1.0",

src/App.test.tsx

@@ -1,20 +1,25 @@
-import { mount, shallow } from 'enzyme';
-import axios from 'axios';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import { Provider } from 'react-redux';
-import * as singleSpa from 'single-spa';
 import App, { AppSansHoc } from './App';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { flushPromises } from './setupTests';
-import { loadAuthProvider } from './state/actions/scigateway.actions';
-import { Preloader } from './preloader/preloader.component';
+import axios from 'axios';
+import { RegisterRouteType } from './state/scigateway.types';
 
-describe('App', () => {
-  beforeEach(() => {
-    singleSpa.start();
-  });
+jest.mock('./state/actions/loadMicroFrontends', () => ({
+  init: jest.fn(() => Promise.resolve()),
+  singleSpaPluginRoutes: ['/plugin1'],
+}));
+
+const testToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QifQ.hNQI_r8BATy1LyXPr6Zuo9X_V0kSED8ngcqQ6G-WV5w';
+
+// needed for the maintenance state update test - for some reason it doesn't work when at the beginning of the test itself
+window.localStorage.__proto__.getItem = jest.fn().mockImplementation((name) => {
+  return name === 'scigateway:token' ? testToken : null;
+});
 
+describe('App', () => {
   afterEach(() => {
     jest.useRealTimers();
   });
@@ -26,46 +31,45 @@ describe('App', () => {
   });
 
   it('should show preloader when react-i18next is not ready', () => {
-    const wrapper = shallow(
-      <AppSansHoc t={jest.fn()} i18n={{}} tReady={false} />
-    );
-    expect(wrapper.find(Preloader).exists()).toBe(true);
+    render(<AppSansHoc t={jest.fn()} i18n={{}} tReady={false} />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 
   it('loadMaintenanceState dispatched when maintenance changes', async () => {
-    // this test only works with old jest fake timers
-    // when they remove legacy timers refactor this test to use real timers
-    jest.useFakeTimers('legacy');
-    (axios.get as jest.Mock).mockImplementation(() =>
+    // mock so token verify succeeds
+    (axios.post as jest.Mock).mockImplementation(() =>
       Promise.resolve({
-        data: {
-          show: true,
-          message: '',
-        },
+        data: {},
       })
     );
+    window.matchMedia = jest.fn().mockReturnValue({ matches: true });
 
-    const wrapper = mount(<App useSuspense={false} />);
-    const realStore = wrapper.find(Provider).prop('store');
-    // Set provider to icat as that supports maintenance states
-    realStore.dispatch(
-      loadAuthProvider('icat.user/pass', 'http://localhost:8000')
+    jest.useFakeTimers();
+
+    render(<AppSansHoc t={jest.fn()} i18n={{}} tReady={true} />);
+
+    const registerRouteAction = {
+      type: RegisterRouteType,
+      payload: {
+        section: 'test',
+        link: '/plugin1',
+        plugin: 'test_plugin',
+        displayName: 'Test plugin',
+        order: 0,
+      },
+    };
+    document.dispatchEvent(
+      new CustomEvent('scigateway', {
+        detail: registerRouteAction,
+      })
     );
-    expect(realStore.getState().scigateway.maintenance).toEqual({
-      show: false,
-      message: '',
-    });
 
-    jest.runOnlyPendingTimers();
-    await act(async () => {
-      await flushPromises();
-      wrapper.update();
-    });
+    // go to plugin page
+    await fireEvent.click(screen.getByRole('link', { name: 'Test plugin' }));
 
-    expect(realStore.getState().scigateway.maintenance).toEqual({
-      show: true,
-      message: '',
-    });
+    expect(document.getElementById('test_plugin')).toBeInTheDocument();
+
+    expect(screen.queryByText('Maintenance')).not.toBeInTheDocument();
 
     (axios.get as jest.Mock).mockImplementation(() =>
       Promise.resolve({
@@ -77,14 +81,12 @@ describe('App', () => {
     );
 
     jest.runOnlyPendingTimers();
+
     await act(async () => {
       await flushPromises();
-      wrapper.update();
     });
 
-    expect(realStore.getState().scigateway.maintenance).toEqual({
-      show: true,
-      message: 'test message',
-    });
+    expect(screen.getByText('Maintenance')).toBeInTheDocument();
+    expect(screen.getByText('test message')).toBeInTheDocument();
   });
 });

src/App.tsx

@@ -34,8 +34,6 @@ const middleware = [
 if (process.env.NODE_ENV === `development`) {
   const logger = createLogger({ collapsed: true });
   middleware.push(logger);
-  // const {whyDidYouUpdate} = require('why-did-you-update');
-  // whyDidYouUpdate(React);
   log.setDefaultLevel(log.levels.DEBUG);
 } else {
   log.setDefaultLevel(log.levels.ERROR);

src/__mocks__/axios.ts

@@ -5,7 +5,10 @@ const requests = {
     if (path === '/settings.json') {
       return Promise.resolve({
         data: {
-          'auth-provider': 'jwt',
+          // Set provider to icat as that supports maintenance states needed for App.test.tsx
+          'auth-provider': expect.getState().testPath?.includes('App.test')
+            ? 'icat'
+            : 'jwt',
           'ui-strings': '/res/default.json',
           plugins: [],
           'help-tour-steps': [],

src/__mocks__/react-i18next.jsx

@@ -36,8 +36,9 @@ const renderNodes = (reactNodes) => {
   });
 };
 
-const useMock = [(k) => k, {}];
-useMock.t = (k) => k;
+const t = (k, opt) => (opt && 'returnObjects' in opt ? [`${k}0`, `${k}1`] : k);
+const useMock = [t, {}];
+useMock.t = t;
 useMock.i18n = {};
 
 const applyTranslation = (Component) => {

src/__snapshots__/example.component.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Example component renders correctly 1`] = `
-<div>
-  test notification
-</div>
+<DocumentFragment>
+  <div>
+    test notification
+  </div>
+</DocumentFragment>
 `;