FE테스트(3) - React Testing Library

📌시작하며

이번엔 vitest와 함께 사용되어 사용자 관점에서 테스트 할 수 있게 도와주는 React Testing Library에 대해 알아보고자 한다.

React Testing Library는 실제 사용자가 UI를 어떻게 사용하는지 초점을 맞춰 테스트하는 것을 권장하며, 이를 구현하기 위한 API를 살펴보자.

✅DOM 요소 선택 (get~)

DOM 요소를 선택하는 방식 (Queries)는 세 가지 방식이 있다.

종류	설명
getBy	일치하는 요소를 즉시 반환, 요소가 없으면 에러 발생
queryBy	일치하는 요소 반환, 없으면 null 반환
findBy	비동기적으로 요소 찾음, 요소가 없을 땐 Promise 거부, 시간이 지나면 재시도

➡️getBy

종류	설명
getByRole	접근성 트리 이용. 가장 권장됨
getByLabelText	주로 폼 필드의 라벨 이용해 검색
getByPlaceholderText	플레이스 홀더를 이용해 검색
getByText	텍스트를 이용해 요소 검색
getByAltText	alt 속성을 가진 요소를 검색
getByTitle	title 속성을 가진 요소를 검색
getByTestId	테스트를 위해 element에 이름을 붙임. data-testid를 사용해 정의
getByDisplayValue	폼에서 현재 입력된 값 기반으로 요소 선택

➡️screen

이제 위에서 살펴본 내용을 활용해 요소를 찾아보자. DOM 요소를 찾을 때는 screen 키워드를 사용한다. screen은 document.body에 바인딩되어 있어, screen.getBy~ findBy~ 등을 사용해 DOM에서 요소를 찾을 수 있다.

import { screen, render } from "@testing-library/react"
import { describe, it, expect } from "vitest"
import Example from "./Example"

describe("Example 컴포넌트 테스트", () => {
  it("Example 컴포넌트 내 요소를 검색한다.", () => {
    render(<Example />)
    const element = screen.getByText("내가 찾는 요소")
    expect(element).toBeInTheDocument()
  })
})

✅이벤트 시뮬레이션

위에서 DOM요소를 찾고 렌더링 했으니 이번엔 사용자 이벤트를 시뮬레이션 해보자.

➡️fireEvent

간단한 사용자 이벤트 (click, change, keydown 등)는 fireEvent를 이용해 시뮬레이션 할 수 있다.

아래 예제는 버튼 컴포넌트를 렌더링하고 사용자가 클릭하는 상황을 테스트한다.

※공식 문서에서는 fireEvent 대신 userEvent를 사용하는 것을 권장하므로, 아래에 작성한 userEvent를 주로 사용하자.

import { render, fireEvent, screen } from "@testing-library/react"
import { vi } from "vitest"

const Button = ({ onClick }) => <button onClick={onClick}>클릭하세요</button>

it("버튼 클릭 시 onClick 함수가 호출된다", () => {
  // vitest를 이용해 handleClick이란 함수를 모킹한다.
  const handleClick = vi.fn()

  // 버튼 컴포넌트를 렌더링 한다.
  render(<Button onClick={handleClick} />)

  //text를 기준으로 요소를 찾고, 클릭 이벤트를 발생시킨다.
  fireEvent.click(screen.getByText("클릭하세요"))

  // handleClick 함수가 1번 호출 되는 것을 검증한다.
  expect(handleClick).toHaveBeenCalledTimes(1)
})

fireEvent로 검증할 수 있는 이벤트는 아래와 같다.

이벤트 이름	설명	예시 코드
click	클릭 이벤트	fireEvent.click(screen.getByText("클릭"))
change	값이 변경될 때 (입력, 선택)	fireEvent.change(screen.getByLabel("이름"), { target: { value: '신짱구' } })
keydown	키가 눌렸을 때	fireEvent.keyDown(screen.getByText("키보드 누름"), { key: 'Enter', code: 'Enter' })
keyup	키가 떼어졌을 때	fireEvent.keyUp(screen.getByText("키보드 뗌"), { key: 'Enter', code: 'Enter' })
keypress	키가 눌려졌을 때	fireEvent.keyPress(screen.getByText("키보드 눌려짐"), { key: 'a', code: 'KeyA' })
focus	포커스가 갔을 때	fireEvent.focus(screen.getByText("포커스"))
blur	포커스가 사라질 때	fireEvent.blur(screen.getByText("블러"))
submit	폼 제출 이벤트	fireEvent.submit(screen.getByText("폼을 제출함"))
mouseOver	마우스를 요소 위로 올렸을 때	fireEvent.mouseOver(screen.getByText("마우스 오버"))
mouseOut	마우스를 요소 밖으로 뺐을 때	fireEvent.mouseOut(screen.getByText("마우스 아웃"))
drag	드래그할 때	fireEvent.drag(screen.getByText("드래그 이벤트"))
dragStart	드래그를 시작할 때	fireEvent.dragStart(screen.getByText("드래그 시작"))
dragEnd	드래그를 끝낼 때	fireEvent.dragEnd(screen.getByText("드래그 끝"))
drop	드롭할 때	fireEvent.drop(screen.getByText("드롭 영역"), { dataTransfer: { files: [new File([], 'a.txt')] } })
input	입력 중 발생	fireEvent.input(screen.getByText("입력"), { target: { value: '입력 중' } })
doubleClick	더블 클릭 이벤트	fireEvent.doubleClick(screen.getByText("더블 클릭"))
contextMenu	컨텍스트 메뉴(오른쪽 클릭)	fireEvent.contextMenu(screen.getByText("오른쪽 클릭"))
touchStart	터치 시작 (모바일 환경)	fireEvent.touchStart(screen.getByText("터치 시작"))
touchEnd	터치 종료 (모바일 환경)	fireEvent.touchEnd(screen.getByText("터치 종료"))
touchMove	터치 이동 (모바일 환경)	fireEvent.touchMove(screen.getByText("터치 이동"))
scroll	스크롤 발생	fireEvent.scroll(screen.getByText("스크롤"))
resize	창 크기 조정	fireEvent.resize(window)

기본적으로는 해당 요소를 찾고, 원하는 이벤트를 발생시켜주면 되지만, 뒤에 추가적으로 속성을 작성해야 하는 경우도 있다.

💟 target과 value

fireEvent.change(screen.getByLabel("이름"), { target: { value: "신짱구" } })
fireEvent.input(screen.getByText("입력"), { target: { value: "입력 중" } })

• target: 이벤트가 발생한 DOM 요소
• value: 해당 요소에 입력된 값

예를 들어, 비밀번호 input을 검증하는 코드를 작성한다고 생각해보자. 비밀번호가 영소문자와 숫자만 작성 가능하다면, 특수문자 일때 제대로 오류를 발생하는지 검증해야 할 것이다.

즉 이렇게 ‘특정 값의 value’를 검증해야할 떄 (필요할 떄) 해당 value에 테스트 해야 하는 값을 넣어주는 것이다.

💟 key와 code

• key: 실제로 입력된 키
• code: 물리적인 키 위치

fireEvent.keyDown(screen.getByText("키보드 누름"), {
  key: "Enter",
  code: "Enter",
})

잘 이해가 안가는데, 두가지 상황을 생각해보자.

1. a와 A를 입력할 때

   • Shift 없이 ‘a’를 누르면: key: ‘a’ code: ‘KeyA’
   • Shift를 누르고 ‘a’를 누르면: key: ‘A’ (대문자 A) code: ‘KeyA’ (물리적으로 동일한 키)

2. 다른 배열의 키보드를 입력할 때 우리가 주로 사용하는 쿼티 배열과 다른 키보드의 경우 같은 위치를 클릭하더라도 입력되는 값은 다를 수 있다. (주로 code는 쿼티 기준으로 정해진다.)

➡️userEvent

userEvent는 Testing Library의 동반 라이브러리로, 실제 브라우저에서 발생할 수 있는 사용자 상호작용을 테스트하는 도구다.

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

// 간단한 사용 예
it("click 이벤트 테스트", async () => {
  const user = userEvent.setup()
  render(<MyComponent />)

  await user.click(screen.getByRole("button", { name: "클릭하세요!" }))
})

userEvent를 사용하기 전 userEvent.setup()을 사용해 사용자 상호작용을 시뮬레이션할 수 있는 환경을 설정하고, 전체적인 사용법은 fireEvent와 동일하게 진행된다.

➡️userEvent vs fireEvent

그럼 두가지의 차이점은 무엇일까?

fireEvent는 브라우저의 저수준 API인 dispatchEvent를 경량으로 감싸 사용자가 원하는 이벤트를 직접 트리거할 수 있게 한다. 하지만 브라우저에서의 이벤트는 여러 이벤트가 연속적으로 발생하기도 한다.

예를들어 사용자가 폼을 이용하고자 하면 input에 focus하고, 값을 입력해 변경되며, 동시에 키보드 이벤트가 발생하는 것을 생각해볼 수 있다.

user-event는 fireEvent처럼 하나의 이벤트가 아니라, 사용자의 상호작용을 테스트 할 수 있게 해주며, 브라우저에서 일어나는 것처럼 DOM을 조작할 수 있다.

따라서 공식문서에서는 user-event를 사용하도록 권장한다. 다만 아직 완벽하게 모든 이벤트가 구현된 것은 아니어서, 이 경우 fireEvent를 사용해 보완적인 측면에 있다.

🗂️참고 사이트

• https://testing-library.com/docs/dom-testing-library/intro