Improving testcase

frontend/src/routes/register/index.test.tsx

 import React from 'react'
 import { render, waitFor, screen } from 'test-utils'
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
 import userEvent from '@testing-library/user-event'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import Register from './index'
+import { act } from '@testing-library/react'
 
-// TODO: can this be initialized in 'test-utils'? should we stub it?
-//       see https://react.i18next.com/misc/testing
-i18n.use(initReactI18next).init({
-  lng: 'en',
-  fallbackLng: 'en',
+// Mock react-i18next module to return a translation that just returns the key
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (value: string) => value,
+    i18n: {
+      changeLanguage: () => new Promise(() => {
+      }),
+    },
+  }),
+}))
 
-  // Have a common namespace used around the full app
-  ns: ['translations'],
-  defaultNS: 'translations',
-
-  debug: false,
-
-  resources: { en: { translations: {} } },
-})
 
 test('Validation message showing if last name is missing', async () => {
   render(
@@ -28,21 +24,26 @@ test('Validation message showing if last name is missing', async () => {
       <Register />
     </LocalizationProvider>)
 
-  const firstNameLabel = i18n.t('input.firstName').toString()
-  const firstNameComponent = screen.getByLabelText(firstNameLabel)
-  expect(firstNameComponent).toBeInTheDocument()
-
-  userEvent.type(firstNameComponent, 'Test')
-
   // Try to go to the next step and check that the validation message is showing
   const submitButton = screen.getByTestId('button-next')
   userEvent.click(submitButton)
 
-  const validationLastName = i18n
-    .t('common:validation.lastNameRequired')
-    .toString()
-  await waitFor(() => screen.getByText(validationLastName))
-
-  const validationMessage = screen.getByText(validationLastName)
+  const validationMessage = await waitFor(() => screen.getByText('validation.lastNameRequired'))
   expect(validationMessage).toBeInTheDocument()
+
+  screen.queryByText('validation.lastNameRequired')
+
+  const inputValue = 'Test input value'
+  // Note that we need to use the test-ID of the input field inside the Material UI TextField-component
+  userEvent.type(screen.getByTestId('lastName-input-field'), inputValue)
+  expect(screen.getByDisplayValue(inputValue)).toBeInTheDocument()
+
+  // Type in text, the message should disappear
+  screen.queryByText('validation.lastNameRequired')
+  userEvent.click(submitButton)
+
+  await waitFor((() => {
+    expect(screen.queryByText('validation.lastNameRequired')).not.toBeInTheDocument()
+  }))
+
 })

frontend/src/routes/register/stepPersonForm.tsx

@@ -132,6 +132,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
               {...register(`last_name`, {
                 required: t<string>('validation.lastNameRequired'),
               })}
+              inputProps={{ 'data-testid': 'lastName-input-field' }}
             />
             <TextField
               id='email'