프론트엔드 테스트

테스트 코드는 백엔드에서 많이 사용하는데, 프론트엔드에서 사용하는 것은 거의 처음 들어볼 것이다.
이런것을 코드로 테스트하는걸까?

테스트 상황

QA - High level test

테스트에는 수준을 나누어 볼 수 있다.
프론트엔드 기준으로 크게 나누어 low level, high level라고 해보자.
버튼 하나를 드래그해서 클릭하거나, 꾹 눌러서 클릭하거나 1초에 10번씩 광클해서 클릭하는 경우의 수가 있을 것이다.
이런 것들은 high level에 해당하는 테스트일 것이다.

이러한 높은 계층의 상황은 QA로 테스트를 하는 경우가 많다.
실제 디버깅된 클라이언트를 하나하나 조작하여 테스트하는 것이다.

Unit Test - Low level test

API에서는 이 글이 작성된 UTC를 제공하고, 프론트엔드에서는 몇 분, 몇 시간 전인지 표시해야하는 상황을 알아보자.

현재 시간 - 2024-08-08T09:36:07Z
작성 시간 - 2024-08-08T08:46:22Z
반환 값 - 50분 전

현재 시간 - 2024-08-08T09:36:07Z
작성 시간 - 2024-08-02T08:46:22Z
반환값 - 6일 전 (0.8주 전이런 것은 안됨)

이런식이다. 이런 로직들은 테스트케이스를 만들어 테스트해야한다.
백엔드에서는 API 하나당 이러한 로직이 1~3가지 정도 엮여있기 때문에, 단위 테스트를 도입하는 것이 쉽다.
하지만 프론트엔드는 이벤트와 로직이 섞여있어서, 단위 테스트를 적용할 궁리를 해야 찾을 수 있다.

테스트 도구

그렇다면 위에서 두 상황에 대한 도구는 없는 것일까?
간단하게나마 소개해보겠다.

Storybook

Storybook은 독립적인 환경에서 UI 컴포넌트를 개발하고 테스트할 수 있는 도구이다.
컴포넌트를 다양한 상태와 시나리오에서 시각적으로 확인할 수 있어, 개발자와 디자이너 모두에게 유용하다.
Storybook을 사용하면 컴포넌트의 각 상태를 쉽게 정의하고, 서로 다른 사용자 인터랙션을 시뮬레이션하여 고수준 QA 테스트를 수행할 수 있다.

Cypress

Cypress는 강력한 엔드 투 엔드(E2E) 테스트 프레임워크로, 실제 사용자가 브라우저에서 애플리케이션을 사용하는 것처럼 테스트할 수 있다.
Cypress를 사용하면 버튼 클릭, 드래그 앤 드롭, 폼 입력 등의 상호작용을 자동화하여 높은 수준의 QA 테스트를 수행할 수 있다.
비슷한 예시로 파이썬의 셀레니움이 있다.

Jest & React Testing Library

Jest와 React Testing Library는 React 컴포넌트의 단위 테스트를 작성하는 데 널리 사용된다.
Jest는 강력하고 사용하기 쉬운 JavaScript 테스트 프레임워크로, 스냅샷 테스트와 모킹 기능을 제공한다.
React Testing Library는 사용자 관점에서 컴포넌트를 테스트할 수 있도록 도와주는 도구로, 접근성과 사용자 경험을 중시한다.
이 두 가지를 엮어서, 내가 설명한 low level testing에 대한 구현이 가능하다.