⚗️ Throw stuff at the wall and see what sticks

jsconfig.json

@@ -1,9 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
-    "paths": {
-      "@/*": ["./*"]
-    },
+    "baseUrl": "src"
   },
   "include": ["src"]
 }

package.json

@@ -230,7 +230,11 @@
   "babel": {
     "presets": [
       [
-        "react-app",
+        "@babel/preset-env",
+        {"modules": false}
+      ],
+      [
+        "@babel/preset-react",
         {
           "runtime": "automatic"
         }
@@ -243,6 +247,15 @@
           "idInterpolationPattern": "[sha512:contenthash:base64:6]",
           "ast": true
         }
+      ],
+      [
+        "module-resolver",
+        {
+          "root": ["./src"],
+          "alias": {
+            "": "./src"
+          }
+        }
       ]
     ]
   },

src/components/CoSign/test.spec.jsx

@@ -1,32 +1,12 @@
+import {render, screen} from '@testing-library/react';
 import messagesNL from 'i18n/compiled/nl.json';
 import React from 'react';
-import {createRoot} from 'react-dom/client';
-import {act} from 'react-dom/test-utils';
 import {IntlProvider} from 'react-intl';
 
 import {testLoginForm} from 'components/FormStart/fixtures';
 
 import {CoSignAuthentication} from './index';
 
-let container = null;
-let root = null;
-beforeEach(() => {
-  // setup a DOM element as a render target
-  container = document.createElement('div');
-  document.body.appendChild(container);
-  root = createRoot(container);
-});
-
-afterEach(() => {
-  // cleanup on exiting
-  act(() => {
-    root.unmount();
-    container.remove();
-    root = null;
-    container = null;
-  });
-});
-
 it('CoSign component constructs the right auth URL', () => {
   // Control the location that the test will use
   const {location} = window;
@@ -35,25 +15,22 @@ it('CoSign component constructs the right auth URL', () => {
     href: 'https://openforms.nl/form-name/step/step-name',
   };
 
-  act(() => {
-    root.render(
-      <IntlProvider locale="nl" messages={messagesNL}>
-        <CoSignAuthentication
-          form={testLoginForm}
-          submissionUuid="111-222-333"
-          authPlugin="digid"
-          saveStepData={() => {}}
-        />
-      </IntlProvider>
-    );
-  });
+  render(
+    <IntlProvider locale="nl" messages={messagesNL}>
+      <CoSignAuthentication
+        form={testLoginForm}
+        submissionUuid="111-222-333"
+        authPlugin="digid"
+        saveStepData={() => {}}
+      />
+    </IntlProvider>
+  );
 
   // Reset location
   window.location = location;
 
-  const loginButton = container.getElementsByTagName('a')[0];
-
-  expect(loginButton.textContent).toEqual('Inloggen met DigiD');
+  const loginButton = screen.getByRole('link', {name: 'Inloggen met DigiD'});
+  expect(loginButton).toBeVisible();
 
   const loginUrl = new URL(loginButton.href);
 

src/components/Form.spec.jsx

@@ -12,8 +12,6 @@ import {routes} from 'components/App';
 
 import {START_FORM_QUERY_PARAM} from './constants';
 
-window.scrollTo = vi.fn();
-
 beforeEach(() => {
   localStorage.clear();
 });
@@ -22,10 +20,6 @@ afterEach(() => {
   localStorage.clear();
 });
 
-afterAll(() => {
-  vi.clearAllMocks();
-});
-
 const Wrapper = ({form = buildForm(), initialEntry = '/startpagina'}) => {
   const router = createMemoryRouter(routes, {
     initialEntries: [initialEntry],
@@ -54,7 +48,7 @@ const Wrapper = ({form = buildForm(), initialEntry = '/startpagina'}) => {
 
 test('Start form anonymously', async () => {
   const user = userEvent.setup();
-  mswServer.use(mockSubmissionPost(), mockAnalyticsToolConfigGet(), mockSubmissionStepGet);
+  mswServer.use(mockSubmissionPost(), mockAnalyticsToolConfigGet(), mockSubmissionStepGet());
   let startSubmissionRequest;
   mswServer.events.on('request:match', async ({request}) => {
     const url = new URL(request.url);

src/components/FormStart/tests.spec.jsx

@@ -7,8 +7,8 @@ import {MemoryRouter} from 'react-router-dom';
 import {buildSubmission} from 'api-mocks';
 import useQuery from 'hooks/useQuery';
 
-import FormStart from '.';
 import {testForm, testLoginForm} from './fixtures';
+import FormStart from './index';
 
 vi.mock('hooks/useQuery');
 let scrollIntoViewMock = vi.fn();
@@ -118,8 +118,8 @@ it('Form start page with initial_data_reference', async () => {
 
 it('Form start page without initial_data_reference', async () => {
   useQuery.mockReturnValue(new URLSearchParams());
-  const onFormStart = jest.fn();
-  const onDestroySession = jest.fn();
+  const onFormStart = vi.fn();
+  const onDestroySession = vi.fn();
 
   render(
     <Wrap>

src/components/FormStep/index.jsx

@@ -380,7 +380,7 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS
       payload: stepDetail,
     });
     configurationRef.current = stepDetail.formStep.configuration;
-    window.scrollTo(0, 0, {behavior: 'smooth'});
+    // window.scrollTo(0, 0, {behavior: 'smooth'});
   }, [submissionStep.url]);
 
   // throw errors from state so the error boundaries can pick them up

src/components/LoginOptions/index.jsx

@@ -66,9 +66,9 @@ const LoginOptions = ({form, onFormStart, extraNextParams = {}, isolateCosignOpt
   const containerProps = form.loginRequired
     ? {}
     : {
-        onSubmit: e => {
+        onSubmit: async e => {
           e.preventDefault();
-          onFormStart(e, true);
+          await onFormStart(e, true);
         },
         'data-testid': 'start-form',
       };

src/components/appointments/fields/DateSelect.spec.jsx

@@ -40,20 +40,12 @@ const render = (comp, locationId) =>
   );
 
 beforeEach(() => {
-  vi.useFakeTimers({
-    advanceTimers: true,
-    now: new Date('2023-06-12T14:00:00Z'),
-  });
-});
-
-afterEach(() => {
-  vi.runOnlyPendingTimers();
-  vi.useRealTimers();
+  vi.setSystemTime(new Date('2023-06-12T14:00:00Z'));
 });
 
 describe('The appointment date select', () => {
   it('disables dates before and after the available dates range', async () => {
-    const user = userEvent.setup({delay: null});
+    const user = userEvent.setup();
     mswServer.use(mockAppointmentDatesGet);
 
     render(<DateSelect products={products} />, '1396f17c');

src/components/appointments/fields/TimeSelect.spec.jsx

@@ -37,26 +37,14 @@ const render = (comp, locationId) =>
     </ConfigContext.Provider>
   );
 
-beforeEach(() => {
-  vi.useFakeTimers({
-    advanceTimers: true,
-    now: new Date('2023-06-12T14:00:00Z'),
-  });
-});
-
-afterEach(() => {
-  vi.runOnlyPendingTimers();
-  vi.useRealTimers();
-});
-
 describe('The appointment time select', () => {
   it('makes sure times are localized', async () => {
-    const user = userEvent.setup({delay: null});
+    const user = userEvent.setup();
     mswServer.use(mockAppointmentTimesGet);
 
     render(<TimeSelect products={products} />, '1396f17c');
+
     const timeSelect = await screen.findByLabelText('Time');
-    expect(timeSelect).toBeVisible();
 
     // open the options dropdown
     act(() => {
@@ -65,12 +53,10 @@ describe('The appointment time select', () => {
     await user.keyboard('[ArrowDown]');
 
     // see mocks.js for the returned times
-    await waitFor(() => {
-      expect(screen.getByText('08:00')).toBeVisible();
-    });
-    expect(screen.getByText('08:10')).toBeVisible();
-    expect(screen.getByText('10:00')).toBeVisible();
-    expect(screen.getByText('10:30')).toBeVisible();
-    expect(screen.getByText('14:30')).toBeVisible();
+    expect(await screen.findByRole('option', {name: '08:00'})).toBeVisible();
+    expect(screen.getByRole('option', {name: '08:10'})).toBeVisible();
+    expect(screen.getByRole('option', {name: '10:00'})).toBeVisible();
+    expect(screen.getByRole('option', {name: '10:30'})).toBeVisible();
+    expect(screen.getByRole('option', {name: '14:30'})).toBeVisible();
   });
 });

src/components/appointments/steps/LocationAndTimeStep.spec.jsx

@@ -58,15 +58,10 @@ const render = initialValues => {
 };
 
 beforeEach(() => {
-  vi.useFakeTimers({
-    advanceTimers: true,
-    now: new Date('2023-06-12T14:00:00Z'),
-  });
+  vi.setSystemTime(new Date('2023-06-12T14:00:00Z'));
 });
 
 afterEach(() => {
-  vi.runOnlyPendingTimers();
-  vi.useRealTimers();
   window.sessionStorage.clear();
 });
 
@@ -111,7 +106,7 @@ describe('The location and time step', () => {
   });
 
   it('retains focus on the date input', async () => {
-    const user = userEvent.setup({delay: null});
+    const user = userEvent.setup();
     mswServer.use(
       mockAppointmentProductsGet,
       mockAppointmentLocationsGet,