user-event / keyboard

Testing Library의 짝꿍 user-event 이해하기 - keyboard편

Nov 30, 2023


keyboard(input: KeyboardInput): Promise<void>

keyboard API를 사용해 키보드 상호작용을 시뮬레이션 할 수 있다. 키 액션을 표현하는 문자열을 인수로 받는다.

키 입력을 다음과 같이 나타낼 수 있다.


keyboard('foo') // translates to: f, o, o

여는 괄호 { 와 [ 는 특수 문자열로 사용되고 두 번씩 겹쳐 써서 일반 문자열로도 참조할 수 있다.


keyboard('{{a[[') // translates to: {, a, [


keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o

키가 눌려진 상태를 유지하지 않는다. 따라서 Shift 는 f 를 누르기 이전에 입력이 풀린다.

특수 문자열은 해당 문자열 앞에 \ 백슬래쉬를 붙여 이스케이프 할 수 있다.


keyboard('{\\}}') // translates to: }


keyboard('[ShiftLeft][KeyF][KeyO][KeyO]') // translates to: Shift, f, o, o

문자열 끝에 > 를 추가하여 키를 계속 누를 수 있다. 이로 인해 keydown 이벤트가 반복되는 경우 반복 횟수를 추가할 수 있다. 이후에 키를 해제해야 하는 경우 문자열 끝에 / 슬래시를 추가한다.


keyboard('{a>}') // 누른 상태를 계속 유지한다
keyboard('{a>5}') // 누른 상태를 유지해 keydown 이벤트를 5번 트리거한다
keyboard('{a>5/}') // keydown 이벤트를 다섯번 트리거하고 키를 해제한다

문자열 앞에 / 슬래시를 추가해 앞서 눌려진 키를 해제할 수 있다.


keyboard('{/a}') // 앞서 눌려진 키 a를 해제한다

이를 통해 키 조합을 시뮬레이션할 수 있다.


keyboard('{Shift>}A{/Shift}') // translates to: Shift(down), A, Shift(up)

key 대 code의 매핑은 기본 US-키보드의 키 맵에 의해 수행된다. keyboardMap 옵션으로 자신만의 로컬 키보드 매핑을 제공할 수 있다.

keyboard('{a>}') // 누른 상태를 계속 유지한다 keyboard('{a>5}') // 누른 상태를 유지해 keydown 이벤트를 5번 트리거한다 keyboard('{a>5/}') // keydown 이벤트를 다섯번 트리거하고 키를 해제한다