Я пишу тесты, используя 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')