프론트엔드 테스트 - (2) React Testing Library

React Testing Library

1. 개요

- Facebook에서 만든 오픈소스 테스팅 프레임워크

- Javascript와 Typescript 를 지원한다.

- React, Vue, Angular 등의 프레임워크에서 지원한다.

- 참고) CRA 설치시 기본으로 RTL이 세팅되어 있다.

 

2. 사용 방법

 

1) CRA에서 테스트 코드 확인해보기

 

Create-React-App을 이용해서 프로젝트를 설정하면, 구성 폴더에서 App.test.tsx를 확인해볼 수 있다.

 

예시:

 

[비교 1]

import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

 

- render 함수 : DOM에 컴포넌트를 렌더링 한다.

- toBeInTheDocumnet() : element가 doument(문서) 안에 있는지 확인한다. (참고: jest-dom/Custom matchers)

 

 

[비교2] - 비추천

test("renders lean react link", () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

 

- getByText : 쿼리 함수*

• getByText: 텍스트를 기준으로 DOM 요소를 찾는다.
• toBeInTheDocument:DOM 요소가 존재하는지 확인한다.
• 쿼리함수란 render 함수가 실행될 때 반환되는 함수
• 여러 가지 쿼리가 필요하면, destructure 구문이 뚱뚱해진다.
• 그래서 screen 객체를 이용해서 쿼리 함수를 사용하는 것을 추천한다.
  • 이점들
    • screen 객체를 사용하면 필요한 쿼리를 추가/제거할 때 렌더링 호출 구조를 최신 상태로 유지할 필요가 없다.
    • screen 만 입력하면 나머지는 IDE가 자동 완성이 해줄 것이다.
    • 참고
      • https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen
      • https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md

 

[참고] Custom Matchers

Matchers	정의
toBeDisabled	요소가 비활성화 상태인지 확인
toBeEnabled	요소가 활성화 상태인지 확인
toBeEmptyDOMElement	DOM 요소가 비어 있는지 확인
toBeInTheDocument	요소가 문서 내에 존재하는지 확인
toBeInvalid	폼 입력 요소가 유효성 검사를 통과하지 못했는지 확인
toBeRequired	폼 입력 요소가 필수로 설정되어 있는지 확인
toBeValid	폼 입력 요소가 유효성 검사를 통과했는지 확인
toBeVisible	요소가 시각적으로 보이는지 확인
toContainElement	한 요소가 다른 요소를 포함하고 있는지 확인
toContainHTML	요소가 특정 HTML을 포함하고 있는지 확인
toHaveAccessibleDescription	요소에 접근 가능한 설명(aria-describedby)이 있는지 확인
toHaveAccessibleErrorMessage	요소에 접근 가능한 오류 메시지(aria-errormessage)가 있는지 확인
toHaveAccessibleName	요소에 접근 가능한 이름(aria-label, aria-labelledby)이 있는지 확인
toHaveAttribute	요소가 특정 속성을 가지고 있는지, 선택적으로 그 값이 일치하는지 확인
toHaveClass	요소가 하나 이상의 CSS 클래스를 가지고 있는지 확인
toHaveFocus	요소가 포커스를 가지고 있는지 확인
toHaveFormValues	폼이 주어진 필드 이름과 값의 집합을 가지고 있는지 확인
toHaveStyle	요소가 주어진 인라인 스타일을 가지고 있는지 확인
toHaveTextContent	요소가 주어진 텍스트 내용을 가지고 있는지 확인
toHaveValue	폼 입력 요소가 주어진 값을 가지고 있는지 확인
toHaveDisplayValue	입력 필드나 select 요소가 화면에 보여주는 값과 일치하는지 확인
toBeChecked	체크박스나 라디오 버튼이 체크된 상태인지 확인
toBePartiallyChecked	체크박스가 부분적으로 체크된 상태인지 확인
toHaveRole	요소가 특정 역할을 가지고 있는지 확인
toHaveErrorMessage	폼 입력 요소에 특정 오류 메시지가 있는지 확인

 

 

2) 테스트 실행

npm test

 

 

3) 쿼리 함수

 

 3-1. *쿼리 함수란

 

페이지에서 요소를 찾기 위해 사용되는 메소드이다.

["get", "find", "query"] 3가지 타입을 가지며 각 타입별로 쓰임새가 다르다.

이들 간의 차이점은 요소를 찾을 수 없을 때 에러를 던지는지, 혹은 Promise를 반환하고 재시도 하는지 여부이다.

 

 

예시:

import {render, screen} from '@testing-library/react' // (or /dom, /vue, ...)

test('should show login form', () => {
  render(<Login />)
  const input = screen.getByLabelText('Username')
  // Events and assertions...
})

 

 

 3-2. 쿼리 함수 종류

 - get, find, query 타입에 대해 차례대로 살펴보자.

 

• getBy...
  • 일치하는 노드 반환
  • 일치하는 요소가 없거나 둘 이상의 요소가 발견될 경우
    • 오류를 발생 시킨다
    • 둘 이상의 요소가 예상되는 경우, getAllBy 사용

getBy... 에서 오류를 던진다.

 

• queryBy...
  • 일치하는 노드 반환
  • 일치하는 요소가 없거나 둘 이상의 요소가 발견될 경우
    • 일치하는 요소가 없을 경우 null 반환
    • 일치하는 항목이 2개 이상 발견되면 오류 발생
    • 둘 이상의 요소가 예상되는 경우, queryAllBy 사용

queryBy...에서 Null을 반환한다.

 

• findBy...
  • Promise 반환
  • getBy + waitFor = findBy
  • waitFor : 일정 기간 동안 기다려야 할 때(pending) 기대가 통과될 때까지 기다릴 수 있음.
  • 일치하는 요소가 없거나 1000ms 후 둘 이상의 요소가 발견될 경우
    • Promise 거부(rejected), 오류 발생
    • 둘 이상의 요소가 예상되는 경우, findAllBy 사용
    •  

[Summary Table]

Type of Query	0 Matches	1 Match	>1 Matches	Retry (Async/Await)
Single Element
getBy...	Throw error	Return element	Throw error	No
queryBy...	Return null	Return element	Throw error	No
findBy...	Throw error	Return element	Throw error	Yes
Multiple Elements
getAllBy...	Throw error	Return array	Return array	No
queryAllBy...	Return []	Return array	Return array	No
findAllBy...	Throw error	Return array	Return array	Yes

 

 

 

 

 

 

 

* 참고

따라하며 배우는 리액트 테스트

https://testing-library.com/docs/queries/about/

 

 

 

 

 

 

 

프론트엔드 테스트 - (3) React Testing Library 실습 (feat. TDD)