Fixing test where checks did not work

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

 import React from 'react'
 import fetchMock, { enableFetchMocks } from 'jest-fetch-mock'
-import { render, waitFor, screen } from 'test-utils'
+import { render, screen } from 'test-utils'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import GuestRegister from './index'
@@ -9,12 +9,13 @@ enableFetchMocks()
 
 const testData = {
   person: {
-    first_name: 'Test',
+    first_name: 'Test20',
     last_name: 'Tester',
     mobile_phone: '+4797543910',
     email: 'test@example.org',
     fnr: '04062141242',
-    passport: 'NO-123456',
+    passport: 'DK-123456',
+    date_of_birth: '1995-02-25',
   },
   role: {
     ou_name_en: 'English organizational unit name',
@@ -23,7 +24,8 @@ const testData = {
     name_nb: 'Gjesterolle',
     start: '2021-08-10',
     end: '2021-08-16',
-    comment: '',
+    contact_person_unit: 'Test contact person',
+    comments: 'Test comment',
   },
   meta: {
     session_type: 'invite',
@@ -31,26 +33,38 @@ const testData = {
 }
 
 beforeEach(() => {
-  fetchMock.mockIf('/api/ui/v1/invited', () =>
+  fetchMock.mockIf('/api/ui/v1/invited/', () =>
     Promise.resolve<any>(JSON.stringify(testData))
   )
 })
 
-test('Mobile phone number parsed and split correctly', async () => {
+test('Field showing values correctly', async () => {
   render(
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <GuestRegister />
     </LocalizationProvider>
   )
 
-  await waitFor(() => screen.queryByText(testData.person.first_name))
-  await waitFor(() => screen.queryByText(testData.person.last_name))
-  await waitFor(() => screen.queryByText(testData.person.email))
-  await waitFor(() => screen.queryByText(testData.person.fnr))
-  await waitFor(() => screen.queryByText('NO'))
-  await waitFor(() => screen.queryByText('123456'))
+  await screen.findByDisplayValue(testData.person.first_name)
+  await screen.findByDisplayValue(testData.person.last_name)
+  await screen.findByDisplayValue(testData.person.email)
+  await screen.findByDisplayValue(testData.person.fnr)
 
-  // There is no proper i18n loaded so the country name will be undefined, the country code should still show though
-  await waitFor(() => screen.queryByText('undefined (47)'))
-  await waitFor(() => screen.queryByText('97543910'))
+  // Passport nationality. The i18n-mock sets up en as the i18n.language property, so look for the English name
+  await screen.findByText('Denmark')
+  await screen.findByDisplayValue('123456')
+  await screen.findByDisplayValue(testData.person.date_of_birth)
+
+  // Mobile phone country code
+  await screen.findByDisplayValue('NO')
+  await screen.findByDisplayValue('97543910')
+
+  // Role information
+  await screen.findByDisplayValue(testData.role.ou_name_en)
+  // TODO Haven't been able to mock getting role types properly yet, so not checking role name
+  // await screen.findByDisplayValue(testData.role.name_en)
+  await screen.findByDisplayValue(
+    `${testData.role.start} - ${testData.role.end}`
+  )
+  await screen.findByDisplayValue(testData.role.comments)
 })

frontend/src/test-utils.tsx

@@ -24,6 +24,7 @@ jest.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (value: string) => value,
     i18n: {
+      language: 'en',
       changeLanguage: () => new Promise(() => {}),
     },
   }),