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

Posted 2021-02-21 answer1215

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 user from ‘@testing-library/user-event‘

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