user-event

fireEvent도 좋지만 공식 문서에서는 user-event를 더 추천.

 

npm install @testing-library/user-event@^14

fireEvent vs user-event

fireEvent

DOM 이벤트를 디스패치 (컴퓨터 이벤트)

user-event

모든 상호작용을 시뮬레이션 (사용자 상호 작용 이벤트)

기본 형태

import 시 구조 분해하지 않고, async / await를 사용해야 한다.

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

// inlining
test('trigger some awesome feature when clicking the button', async () => {
  const user = userEvent.setup()

  render(<MyComponent />)

  await user.click(screen.getByRole('button', {name: /click me!/i})) // hover, unhover 등등

})

"not wrapped in act(...)" 오류가 발생할 경우

npm install @testing-library/react@14 @testing-library/user-event@14 @testing-library/dom@9