Wrap some actions that result in a state change in act()

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

@@ -4,11 +4,9 @@ import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import { BrowserRouter } from 'react-router-dom'
 
-import { render, screen } from 'test-utils'
+import { render, screen, act, waitFor, fireEvent } from 'test-utils'
 import { FeatureContext } from 'contexts'
-import { fireEvent } from '@testing-library/react'
 import GuestRegister from './index'
-import { waitFor } from '../../../test-utils'
 
 enableFetchMocks()
 
@@ -176,10 +174,10 @@ test('Gender is remembered when going back', async () => {
 
   // Go forward and then back in wizard
   const nextButton = screen.getByTestId('button-next')
-  nextButton.click()
+  act(() => nextButton.click())
   await screen.findByTestId('button-back')
   const backButton = screen.getByTestId('button-back')
-  backButton.click()
+  act(() => backButton.click())
 
   // The selection should still be male
   await waitFor(() => screen.getByText('input.male'))
@@ -218,10 +216,10 @@ test('Gender not required when gender field is not shown', async () => {
   // No gender is set, but it should still be possible
   // to go forward and back in wizard
   let nextButton = screen.getByTestId('button-next')
-  nextButton.click()
+  act(() => nextButton.click())
   await screen.findByTestId('button-back')
   const backButton = screen.getByTestId('button-back')
-  backButton.click()
+  act(() => backButton.click())
   nextButton = screen.getByTestId('button-next')
-  nextButton.click()
+  act(() => nextButton.click())
 })

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

@@ -4,7 +4,7 @@ import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import { BrowserRouter } from 'react-router-dom'
 
-import { render, waitFor, screen } from 'test-utils'
+import { render, waitFor, screen, act } from 'test-utils'
 import StepRegistration from './stepRegistration'
 
 jest.mock('hooks/useOus', () => () => ({
@@ -25,7 +25,7 @@ test('Validation message showing if last name is missing', async () => {
 
   // Try to go to the next step and check that the validation message is showing
   const submitButton = screen.getByTestId('button-next')
-  userEvent.click(submitButton)
+  act(() => userEvent.click(submitButton))
 
   const validationMessage = await waitFor(() =>
     screen.getByText('validation.lastNameRequired')
@@ -36,12 +36,12 @@ test('Validation message showing if last name is missing', async () => {
 
   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)
+  act(() => 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)
+  act(() => userEvent.click(submitButton))
 
   await waitFor(
     () => {