리액트 기반 테스팅 라이브러리로 jest말고도 vitest가 있다. 두 라이브러리는 기본적으로 문법 구조도 거의 같다. 한 라이브러리에서 다른 라이브러리로 마이그레이션을 진행해도 바꿀 부분이 거의 없을 정도다.
vitest의 장점은, 속도가 빠르다는 것이다. vite를 보완하여 사용하기 위해 등장했으나, 다른 라이브러리나 프레임워크에서도 사용이 가능하다.
이 밖의 주요한 차이점은 각 라이브러리가 모듈 관리 시스템에 있다. jest는 CommonJS를 지원하고, vitest는ECMAScript 혹은 ESM를 지원한다.
어떤 라이브러리를 선택하여 공부하더라도, 고급 문법을 제외하고 기본적인 문법은 정말 유사하기 때문에 큰 차이는 없다.
+) vitest는 기본적으로 테스트를 watch 모드로 실행한다.
React Testing Library
리액트 테스팅 라이브러리는 컴포넌트를 시뮬레이션된 DOM을 랜더링한다. 그리고 이 시뮬리레이션된 DOM을 단언할 수 있고 상호작용할 수 있도록 해 준다. 이를 사용하기 위해서는 테스트 러너가 필요한데, 이 테스트 러너가 Jest 혹은 Vitest다.
기본 문법
import { render, screen } from "@testing-library/react";
import App from "./App";
test("App contains correct heading", () => {
render(<App />);
const headingElement = screen.getByText(/learn react/i);
expect(headingElement).toBeInTheDocument();
});
테스팅 라이브러리에서 제공하는 render 메서드로 시뮬레이션된 DOM을 랜더링하고, 랜더링된 DOM은 screen 메서드로 접근할 수 있다.
테스트의 성공/실패 여부는 expect를 통해 단언한 구문으로 판단한다.
단언
단언의 구조는 다음과 같다.
expect(headingElement).toBeInTheDocument();
expect(단언할 요소).매쳐<단언 내용>();테스트의 종류
유닛 테스트
함수나 컴포넌트의 하나의 유닛, 혹은 단위를 테스트한다. 다른 코드의 유닛과 상호작용하는 것을 테스트하지 않는다.
통합 테스트
통합 테스트는 여러 개의 유닛 간의 상호작용을 테스트한다.
기능 테스트
소프트 웨어의 특정 기능을 테스트한다.
인수 테스트
인수 테스트는 End-to-end 테스트, 또는 E2E 테스트라고도 한다. 이 테스트는 다른 테스트들과는 달리, 실제 브라우저와 서버를 필요로 한다.
- 이 테스트를 할 때는 주로 Cypress나 Selenium 같은 도구를 필요로 한다.
유닛 테스트 vs 기능 테스트
- 유닛 테스트
유닛 테스트를 테스트를 최대한 격리시킨다. 따라서 다른 함수에 의존하는 컴포넌트의 경우, 실제 함수 대신 테스트(mock) 함수를 사용한다
격리되어 있기 때문에, 실패 요인을 찾기 쉬우나 실제 유저가 소프트웨어와 상호작용하는 방식과는 거리가 멀다.
리팩토링을 진행하여, 작성 방식을 변경한 경우, 동작은 동일하더라도 실패하게 될 수 있다.
- 기능 테스트
기능 테스트는 유저 플로우와 연관된 모든 단위, 테스트하는 특정 동작을 모두 포함한다.
유저가 실제로 상호작용하는 법과 유사하여, 테스트를 통과한 경우, 실제 프로덕트에서도 문제가 발생하지 않을 가능성이 높다.
리팩토링을 진행하여 코드가 변경되었더라도, 동작이 동일한 경우 테스트가 실패하지 않는다.
접근성
React testing Library는 요소를 찾을 때, 접근성이 좋은 시멘틱한 요소로 찾을 것을 권유한다. RTL은 가장 우선적으로 getByRole을 사용해서 요소를 찾는다.
만약 테스팅 라이브러리를 통해 특정 요소에 접근하지 못하면, 스크린리더에 친화적이지 않다고 판단할 수 있다.
