index.test.tsx

import React from 'react'
import { render, waitFor, screen } from 'test-utils'
import userEvent from '@testing-library/user-event'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import { LocalizationProvider } from '@mui/lab'
import Register from './index'

test('Validation message showing if last name is missing', async () => {
  render(
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Register />
    </LocalizationProvider>
  )

  // 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 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()
  })
})