user-event는 상호 작용이 브라우저에서 발생한 경우 발생할 이벤트를 디스패치하여 사용자 상호 작용을 시뮬레이션하는 Testing Library와 함께 사용하게 될 라이브러리다.LATEST VERSION
이 문서는
user-event@14 를 기준으로 작성되었다.user-event 예제 대부분이 React를 위한 것 이지만, DOM이 있다면 어떤 프레임워크에서도 이 라이브러리를 사용할 수 있다.Differences from fireEvent
fireEvent는 DOM 이벤트를 디스패치하는 반면, user-event는 전체 상호 작용을 시뮬레이션하여 여러 이벤트를 발생시키고 그 과정에서 추가적인 검사를 수행할 수 있다.Testing Library의 내장 fireEvent는 브라우저의 저수준
dispatchEvent API에 추가 기능을 붙여 구현한 가벼운 모듈로 개발자가 임의의 요소에 대해 이벤트를 트리거할 수 있도록 한다. 문제는 브라우저가 보통 하나의 상호 작용에 대해 하나의 이벤트를 트리거하는 것 이상의 작업을 한다는 것이다. 예를 들어 사용자가 텍스트 상자에 입력하면 요소에 포커스를 맞추어야 하고, 그런 다음 키보드 및 인풋 이벤트가 실행되고 요소의 선택 및 값이 입력과 함께 조작된다.user-event를 사용하여 구체적인 이벤트 대신 사용자 상호 작용을 형성할 수 있다. 브라우저에서 사용자가 상호 작용 하듯 DOM을 조작하고 그 과정중에 가시성과 상호 작용 검사를 추가한다. 예를 들어 브라우저가 숨겨진 요소를 클릭하거나 비활성화된 텍스트 상자에 입력하지 않도록 하는 것이다.
이것이 컴포넌트의 상호 작용 테스트에
user-event 를 사용해야 하는 이유다.그러나 아직 user-event에 구현되지 않은 사용자 상호 작용이 있다. 이러한 경우
fireEvent를 사용하여 소프트웨어가 의존하는 구체적인 이벤트를 디스패치할 수 있다.유념할 것은, user-event를 사용함으로써 컴포넌트 및 테스트는 상호 작용의 구체적인 부분에 대한 당신의 가정에 의존하게 된다.
Writing tests with userEvent
컴포넌트를 렌더링하기 전에
userEvent.setup() 을 호출하는 것이 좋다. 이 작업은 테스트 자체에서 수행하거나 setup 함수를 사용하여 수행할 수 있다. "테스트 시 네스팅 방지"에 설명된 이유로 테스트 밖에서(예: before / after 훅) userEvent 함수를 렌더링하거나 사용하는 것을 권장하지 않는다.import userEvent from '@testing-library/user-event'
// inlining
test('trigger some awesome feature when clicking the button', async () => {
const user = userEvent.setup()
// Import `render` and `screen` from the framework library of your choice.
// See https://testing-library.com/docs/dom-testing-library/install#wrappers
render(<MyComponent />)
await user.click(screen.getByRole('button', {name: /click me!/i}))
// ...assertions...
})import userEvent from '@testing-library/user-event'
// setup function
function setup(jsx) {
return {
user: userEvent.setup(),
// Import `render` from the framework library of your choice.
// See https://testing-library.com/docs/dom-testing-library/install#wrappers
...render(jsx),
}
}
test('render with a setup function', async () => {
const {user} = setup(<MyComponent />)
// ...
})userEvent.click() (이 메서드는 내부적으로 setup 을 트리거한다)와 같은 API를 직접 호출하는 것이 여전히 v14에서 가능하긴 하지만, 이 옵션은 v13에서 v14로의 마이그레이션을 돕고 간단한 테스 수행을 위한 것이다. 따라서 userEvent.setup() 가 반환한 인스턴스의 메서드를 사용할 것을 권장한다.Share article
