React Testing Library - тестирование изолированно и ошибка userEvent

Question

Я пишу тесты, используя Jest и React Testing Library. У меня были неудачные тесты, и я понял, что если я изменю порядок тестов, он будет работать. Я предполагаю, что это потому, что тесты не изолированы должным образом, и один тест может повлиять на другой.

Я звоню:

afterEach(() => {
  cleanup()
  jest.resetAllMocks()
})

У меня есть тест, который выглядит следующим образом:

it('calls API when submitted', async () => {
   render(<SignUp />)
   fillAllVerificationFieldsWithTestData()
   validateUser.mockResolvedValueOnce({ id: 123 })      
   const signupButton = screen.getByTestId(
      'sign-up-verification-button',
    )  
    userEvent.click(signupButton)     
    await waitFor(() => expect(validateUser).toHaveBeenCalledTimes(1))      
 })

Если я создаю точно такой же тест или запускаю аналогичный тест после этот с userEvent.click, я получаю ошибку:

Невозможно запустить событие "mouseMove" - ​​пожалуйста, предоставьте элемент DOM.

Я посмотрел в @ testing-library / user-event library, и я вижу этот код:

const userEvent = {
  click(element) {
    const focusedElement = element.ownerDocument.activeElement;
    const wasAnotherElementFocused =
      focusedElement !== element.ownerDocument.body &&
      focusedElement !== element;
    if (wasAnotherElementFocused) {
      fireEvent.mouseMove(focusedElement);
      fireEvent.mouseLeave(focusedElement);
    }

Я заметил, что element.ownerDocument.activeElement равен нулю wasAnotherElementFocused - это истина, поэтому выдает ошибку.

Когда я запускаю тест в первый раз, он не нулевой, поэтому он работает.

Нужна ли дополнительная уборка между тестами? Если я использую fireEvent:

 fireEvent(signupButton,
      new MouseEvent('click', {
          bubbles: true,
      }),
   )

Это работает, но я боюсь, что делаю что-то не так и неправильно изолирую свои тесты.

РЕДАКТИРОВАТЬ:

Вот код для fillAllVerificationFieldsWithTestData:

export const fillAllVerificationFieldsWithTestData = () => {
  const { given_name, family_name, zip, social, loanNumber } = {
    given_name: screen.getByTestId('given_name'),
    family_name: screen.getByTestId('family_name'),
    zip: screen.getByTestId('zip'),
    social: screen.getByTestId('last4ssn'),
    loanNumber: screen.getByTestId('loan_number'),
  }

  userEvent.type(given_name, 'FirstName')
  userEvent.type(family_name, 'LastName')
  userEvent.type(zip, '77025')
  userEvent.type(social, '1234')
  userEvent.type(loanNumber, '1112223333')
}

и screen импортируется из @testing-library/react, и я импортирую проверить пользователя следующим образом:

import { validateUser } from '../../../services/auth'
jest.mock('../../../services/auth')