userEvent에 대해서 좀 더 알아보기

userEvent는 클라이언트의 행동을 모방해서 테스트를 진행함에 따라 사용자의 인터렉션에 따른 결과를 테스트하기에 적합하다는 것은 지난 번 글을 통해 알 수 있었는데 그렇다면 어떻게 사용하는지 자세히 알아보자.

 

먼저 userEvent를 사용하기 위해서 아래 명령어를 통해 라이브러리를 설치한다.

npm install --save-dev @testing-library/user-event @testing-library/dom

라이브러리 설치가 끝나면 사용할 스크립트에서 import!!

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

1. click(element, eventInit, options) :: 클릭
userEvent는 유저의 인터렉션을 모방한다고 설명한 것과 같이 단순 클릭 뿐만 아니라 옵션을 통해 ctrl + 클릭, shift + 클릭에 대한 인터렉션 또한 테스트 할 수 있다.

userEvent.click(elem, {ctrlKey: true, shiftKey: true})​

2. dblClick(element, eventInit, options) :: 더블클릭

3. type(element, text, [options]) :: input, textarea 요소에 대한 인터렉션
(userEvent에 대해서 깊게 공부하게 된 이유이기도 하다.)
👊 이 type이 제대로 알면 많은 인터렉션에 대한 테스트가 가능한 것이 특수옵션이 있다.

- 두번째 인자로 받는 text에 {enter}, {del} 과 같은 특수 옵션을 부여할 수 있는데 이러한 특수 옵션을 통해 해당 글자가 지워졌을때, 엔터 후 입력했을 때와 같이 각각의 경우를 테스트 할 수 있게된다.

import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('delete characters within the selectedRange', () => {
  render(
    <div>
      <label htmlFor="my-input">Example:</label>
      <input id="my-input" type="text" value="This is a bad example" />
    </div>,
  )
  const input = screen.getByLabelText(/example/i)
  input.setSelectionRange(10, 13)
  userEvent.type(input, '{backspace}good')

  expect(input).toHaveValue('This is a good example')​

- 기존 값의 앞에 입력을 할때에는 initialSelectionStart 와 initialSelectionEnd 옵션을 통해 기존 값의 앞에 입력할 경우 또한 테스트 할 수 있다.

import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('prepend text', () => {
  render(<input defaultValue="World!" />)
  const element = screen.getByRole('textbox')

  // Prepend text
  element.setSelectionRange(0, 0)
  userEvent.type(element, 'Hello, ', {
    initialSelectionStart: 0,
    initialSelectionEnd: 0,
  })

  expect(element).toHaveValue('Hello, World!')
})​

4. keyboard(text, options) :: 키보드 입력
type과 다른 부분은 type은 입력필드에서의 키보드 입력에 대한 부분이라면 keyboard는 단순히 키보드 입력이라는 점.

5. hover(element, options) :: 마우스 호버
unhover(element, options) :: 마우스 호버상태에서 치우기

그 외에도 몇가지 메소드들이 더 있으나 지금까지 테스트 코드를 작성하면서 이정도를 주로 사용한 것 같다.
더 자세한 정보들은 아래 공식문서에서!!

user-event v13 | Testing Library