[React Testing] Improve Test Confidence with the User Event Module

The User Event module is part of the Testing Library family of tools and lets you fire events on DOM nodes that more closely resemble the way your users will interact with your elements. Let’s refactor our fire event usages to use that instead.

import userEvent from '@testing-library/user-event'

test('v2: entering an invalid value shows an error message', async () => {
  const user = userEvent.setup()
  const { getByLabelText, getByRole } = render(<FavoriteNumber />)
  const input = getByLabelText(/favorite number/i)
  // simulate a user type on input
  await user.type(input, '10')
  expect(getByRole('alert')).toHaveTextContent(/the number is invalid/i)
})