FE테스트(1)

📌시작하며

드디어 이 날이 왔다 개인적으로 프론트엔드 테스트에 흥미가 있어 인프런에서 강의를 수강했었고, 한동안은 테스트해볼 만한 컴포넌트를 만들어 테스트를 작성하는 시간을 가졌다.

프론트엔드 테스트에 대해 “정말 필요한가?”라는 의견도 있지만, 나는 테스트에 긍정적인 입장이다.

이유는, 규모가 큰 프로젝트 진행시 예상치 못한 사이드 이펙트를 최대한 줄이고 싶다는 것과, 테스트 작성을 통해 더 나은 컴포넌트 구조를 만들 수 있다고 생각했기 때문이다.🤔

그래서 vitest와 react Testing Library를 사용해 테스트했던 내용을 전체적으로 정리해보고자 한다.

(아직 공부중이라 내용이 정확하지 않을 수 있다😅)

✅Vitest

이름에서도 알 수 있듯이, Vitest는 Vite를 기반으로 한 테스트 도구로서, Vite의 설정 파일인 vite.config.ts 파일을 사용하여 개발, 빌드, 테스트 환경을 일관성 있게 유지할 수 있다.

또한, Vitest는 기존 테스트 도구인 Jest와 호환되는 API를 제공하며, 모킹, 스냅샷, 커버리지 등 테스트에 필요한 다양한 기능을 제공한다.

크게 Vitest의 장점은 아래 4가지다.

1. Vite와의 통합
2. 빠른 속도
3. 가벼움
4. API 호환성

이러한 장점을 바탕으로 테스트는 Vitest를 통해 접하게 되었다.

✅React Testing Library

(React) Testing Library는 사용자 중심의 방식으로 UI 컴포넌트를 테스트하는 데 도움을 준다.

예를 들어, Testing Library에서 제공하는 DOM Testing Library는 DOM 노드를 쿼리하고 상호작용하는 데 중점을 두는데, 이때 실제 사용자가 화면을 볼 때, 주로 상호작용하는 요소인 텍스트, 레이블, 또는 접근성 속성(aria-label 등)을 이용해 getByText, getByRole, getByLabelText 같은 쿼리 메서드를 사용하여 DOM 요소에 접근하도록 권장하고 있다.

✅Vitest와 React Testing Library

Vitest는 빠르고 간편한 테스트를 가능하게 해주고, Testing Library는 실제 사용자가 웹을 사용하는 방식을 기반으로 테스트할 수 있기 때문에, 이 두 라이브러리의 장점을 모두 활용해 FE 테스트를 작성한다.

✅설치

나는 현재 Next.js를 가장 많이 사용하고 있기 때문에, Next.js 공식문서에서 제안하는 방법을 시도했다. pages폴더와 app폴더 모두 생성되는데 pages 폴더는 사용하지 않아서 삭제했다.

npx create-next-app@latest --example with-vitest 폴더 이름

설치가 완료되었다면 필요한 라이브러리를 추가로 설치해준다. (이때 react testing library로 포함된다.)

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom
# or
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

두가지를 설치하면 자동으로 vitest.config.ts와 필요한 명령어가 자동으로 세팅된다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

✅ Vitest 익스텐션

vs code에서 test를 쉽게 실행하고 확인하기 위해 Vitest 익스텐션을 설치해주었다.

사용 버전은 v1.0.7으로, 작성하는 현재 최신은 v1.2.8이지만 전에 설치할 당시 작성한 테스트를 제대로 잡아내지 못하는 문제가 있었고, stack oveflow에서 같은 문제를 겪고 있는 사람들의 조언에 따라 버전을 다운그레이드 해 진행했다.

✅Test code 파일명

test 코드는 컴포넌트이름.test.tsx 또는 컴포넌트이름.spec.tsx 형식으로 작성한다. test는 알겠는데 spec은 무슨 이유에서 사용하게 되었는지 찾아보았는데,

• test.tsx: 테스트 파일임을 나타내는 일반적인 의미
• spec.tsx: “specification”의 약자로, 특정 컴포넌트나 함수의 동작을 설명하는 테스트를 의미

한다고 한다. 이 부분은 팀원과 상의해서 통일하면 좋을 듯 하다.

✅단위 테스트

테스트를 진행하기 앞서, 테스트를 지칭하는 용어를 짚고 넘어가보자. 단위 테스트 (Unit Test) 란 앱에서 개별적인 작은 단위(함수나 메서드, 컴포넌트)를 독립적으로 테스트하는것을 말한다. 전체 시스템보다는 특정 작은 단위에 대한 테스트라는 특징이 있다.

보통 공통 컴포넌트는 단위 테스트에 적합한데, 다른 컴포넌트와의 의존성이 적고, 자주 사용되기 때문에 안정성을 높일 필요가 있기 때문이다.

✅통합 테스트

통합 테스트(Integration Test) 는 여러 구성 요소가 함께 동작해야 할 때 올바른 상호작용이 이루어지는지 확인하는 방식이다. 즉, 단위 테스트보다 조금 더 큰 범위의 것을 테스트하는 것으로, 단위 테스트만으로는 전체 시스템의 동작을 검증할 수 없기 때문에, 여러 구성 요소가 함께 동작할 때 발생하는 오류를 방지할 수 있다.

🗂️참고 사이트

• https://nextjs.org/docs/app/building-your-application/testing/vitest