React Jest user-event FireEvent

fireEvent / user-event

14버전으로 진행할 예정인데 13버전과 14버전은 상당히 다르기 때문에 유의바랍니다.
fireEvent는 DOM 이벤트를 디스패치하고 user-event는 모든 상호 작용을 시뮬레이션합니다.

https://ph-fritsche.github.io/blog/post/why-userevent

Why you should test with user-event

fireEvent는 이벤트를 트리거 하지만 user-event는 직접 브라우저에서 사용자가 상호 작용하는 것과 동일하게 동작합니다.
그러기에 user-event를 사용하면 좋지만 아직 구현되지 않은 사용자 상호 작용이 있어 필요한 부분에 맞춰 사용해야 한다.

 

fireEvent

fireEvent는 Testing Library에 내장된 낮은 수준의 가벼운 API입니다.
문제는 브라우저가 일반적으로 하나의 이벤트를 위한 하나의 상호작용에 많은 트리거를 수행하게 됩니다.
예를 들어 사용자가 텍스트 창에 입력할 때 초점을 맞추고 키보드, 입력 이벤트를 발생한 후에 요소의 선택 및 값이 조작됩니다.

 

user-event

user-event는 구체적인 이벤트 대신 사용자 상호 작용을 설명할 수 있고 브라우저의 사용자 상호 작용처럼 DOM을 조작합니다.

user-event 사용법

setup(options?: Options): UserEvent

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

const user = userEvent.setup()

await user.keyboard('[ShiftLeft>]') // Press Shift (without releasing it)
await user.click(element) // Perform a click with `shiftKey: true`

setup 메서드를 실행하면 user 객체가 생성되는데

user 객체에는 click, hover, unhover, keyboard 메서드가 포함됩니다

setup 메서드의 출력값을 user 객체로 정의한 다음 user 객체에서 사용자 이벤트 시뮬레이션 메서드를 실행하면 됩니다

* 사용자 이벤트 API는 항상 프로미스를 반환합니다

사용자 이벤트 API를 사용할 때마다 대기(await)해야 한다는 뜻입니다
await를 사용하지 않는다면 단언이 이벤트 완료를 기다리지 않아 테스트에 실패할 수 있다.

screen Query Methods

👍 command[All]ByQueryType

• command
  • get : 요소가 DOM 내에 있다면
  • query : 요소가 DOM 내에 없다면
  • find : 요소가 비동기적으로 나타난다면
• [All]
  • 포함 : 하나 이상의 Match를 expect하는 경우
  • 미포함 : 하나의 Match만 expect하는 경우
    
    
• QueryType
  • Role : 코드의 접근성 보장하며 가장 선호되는 방법
  • AltText : 이미지의 Alt로 검색
  • Text : 주어진 텍스트로 검색
  • ETC : PlaceholderText, LabelText, DisplayValue
    
    
• 예시) 이들을 조합해 요소 검색 방법을 만들 수 있다.
  • getAllByText() : DOM 내에 있는 하나 이상의 텍스트가 동일한 요소
  • findByAltText() : 비동기적으로 나타나는 하나의 이미지 ALT가 동일한 요소
  • QueryAllByLabelText : DOM 내에 없는 하나 이상의 Label Text가 동일한 요소

이런 식으로 DOM에서 찾고자 하는 내용에 적절한 방식으로 섞어서 사용한다.

 

Pointer API

Pointer API는 클릭과 이동에 대한 상호 작용을 시뮬레이션 할 수 있다.

• 클릭
  keys의 값으로 [MouseLeft]를 사용한다면 마우스를 눌렀다 떼는 시뮬레이션을 한다.
  keys는 배열로 여러 포인터 액션 사용이 가능하고 keys를 생략하고 문자열로 나열해도 된다.

pointer({keys: '[MouseLeft]'})
pointer({keys: '[MouseLeft][MouseRight]'})

 - option
  - mousedown
	">"의 의미는 마우스를 눌렀을 때의 시뮬레이션을 의미한다.
	pointer('[MouseLeft>]') // press the left mouse button
  - mouseup
	"/"의 의미는 마우스를 뗐을 때의 시뮬레이션을 의미한다.
	pointer('[/MouseLeft]')

//아래는 동일한 시뮬레이션이다.
pointer('[MouseLeft>][/MouseLeft]') === pointer('[MouseLeft]')
//마우스 왼쪽 누른 상태에서 오른쪽을 클릭하고 왼쪽을 뗀다.
pointer('[MouseLeft>][MouseRight][/MouseLeft]')

• 포인터 위치
  textContent에 따라 포인터 위치를 지정할 수 있다.

// 요소: <div><span>foo</span><span>bar</span></div>
// 👍 : 마우스 커서의 위치 표현
// ▶️◀️ : 마우스 드래그 선택의 표현

 - 2번째 문자에 마우스를 클릭한다.
pointer({target: element, offset: 2, keys: '[MouseLeft]'})
// => <div><span>fo👍o</span><span>bar</span></div>

 - 2번째 문자부터 5번째 문자까지 드래그 선택
pointer([{target: element, offset: 2, keys: '[MouseLeft>]'}, {offset: 5}])
// => <div><span>fo▶️o</span><span>ba◀️r</span></div>

 - 1번째 노드에 마우스 클릭
pointer({target: element, node: element, offset: 1, keys: '[MouseLeft]'})
// => <div><span>foo</span>👍<span>bar</span></div>

 

Conventience APIs

해당 API들은 Pointer API들 중 많이 사용하는 것들을 편하게 사용할 수 있도록 제공되는 API이다.

 

마우스 클릭

• 클릭

- Conventience APIs
click(element: Element): Promise

- pointer API
pointer([{target: element}, {keys: '[MouseLeft]', target: element}])

• 더블클릭

- Conventience APIs
dblClick(element: Element): Promise

- pointer API
pointer([{target: element}, {keys: '[MouseLeft][MouseLeft]', target: element}])

• 세번클릭

- Conventience APIs
tripleClick(element: Element): Promise<void>

- pointer API
pointer([ 
    {target: element},
    {keys: '[MouseLeft][MouseLeft][MouseLeft]', target: element},
])

 

마우스 이동

- Conventience APIs
hover(element: Element): Promise<void>
unhover(element: Element): Promise<void>

- pointer API
pointer({target: element})
pointer({target: element.ownerDocument.body})

키보드

tab(options: {shift?: boolean}): Promise<void>

// shift 옵션 사용 안함.
keyboard('{Tab}')

// shift 옵션 True 설정
keyboard('{Shift>}{Tab}{/Shift}')

// shift 옵션 false 설정
keyboard('[/ShiftLeft][/ShiftRight]{Tab}')