React 测试库 - 隔离测试和 userEvent 错误

Question

I'm writing tests using Jest and React Testing Library. I had failing tests and I realized that if I change the order of the tests, it will work. I'm guessing this is because the tests aren't properly isolated and one test might affect the other.

I am calling:

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

I have a test that looks like this:

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

If I create the exact same test or run a similar test after this one with a userEvent.click, I get an error:

Unable to fire a "mouseMove" event - please provide a DOM element.

I looked in the @testing-library/user-event library and I see this code:

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);
    }

I noticed that element.ownerDocument.activeElement is null wasAnotherElementFocused is true and so it throws the error.

The first time I run the test it isn't null so it works.

Do I need some extra clean up between tests? If I use fireEvent:

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

It works but I'm afraid I'm doing something wrong and not isolating my tests correctly.

EDIT:

Here is the code for the 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')
}

and screen is imported from @testing-library/react and I import validate user like this:

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

Answer 1

This is a bug that was reported in the testing-library/user-event GitHub and it should be fixed as of v11.0.1 . It's specific to userEvent , which is why fireEvent works.

Note that you shouldn't need to call cleanup if you're using Jest because it will get called for you .

Answer 2

So, I just faced this problem, and what fixed it for me was wrapping any code that causes a React state change (which your userEvent code presumably does) in act . So, your initial test would look like this:

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

Can you give this a try, applying similar changes to your fillAllVerificationFieldsWithTestData function, and let us know how it turned out?