Testing Library에서 유저 상호작용 파악하기
No Filled
user-event
user-event는 브라우저에서 상호작용이 일어났을 때 발생할 수 있는 이벤트를 전송한다.
fireEvent와의 차이
fireEvent는 DOM 이벤트를 전송하는 것에 그친다.
보통 브라우저는 하나의 상호작용에서 하나의 이벤트를 트리거하는 것 이상을 수행한다.
ex) 텍스트 상자 입력 → 요소에 포커스 → 키보드 및 입력 이벤트 → 요소의 선택 항목과 값이 조작
반면 user-event는 전체 상호작용을 시뮬레이션하여 여러 이벤트를 전송하고 그 과정에서 추가 검사를 수행한다.
즉 사용자 상호작용을 설명할 수 있는 것이다.
import userEvent from '@testing-library/user-event'
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 }))
})유용한 setup 함수
다음과 같이 setup 함수를 통해 편리하게 사용할 수 있다.
import userEvent from '@testing-library/user-event'
function setup(jsx) {
return {
user: userEvent.setup(),
...render(jsx),
}
}
test('render with a setup function', async () => {
const { user } = setup(<MyComponent />)
})