테스팅과 리액트 테스팅

시리즈

2024. 12. 7. PM 9:00:00

#리액트 #React #테스팅 #testing #vitest

이제부터 다룰 리액트 콘텐츠는 다소 까다롭고 복잡합니다. 코드를 작성하는 건 비교적 간단하지만, 구현한 것이 의도대로 동작하는지 검증하고, 의도대로 동작하지 않을 때 문제를 해결하는 건 복잡하거나 까다롭습니다. 왜냐하면 컴포넌트의 상태와 부수효과가 섞여서 복잡도가 증가하거든요.

이를 효율과 효과있게 검증하고 문제를 해결하는 방법은 테스트 코드를 작성하는 것입니다. 구현을 하고 브라우저에서 손으로 테스트를 해도 되지만, 빠르게, 그리고 테스트하는 과정을 의도를 드러내는 좋은 방법이 테스트 자동화이기 때문입니다. 테스팅은 코드의 품질을 높여주고, 의도하지 않은 버그를 방지하며, 코드 변경 시 발생할 수 있는 리스크를 줄여줍니다.

이번 편에서는 리액트 애플리케이션 테스팅의 중요성과 종류, 그리고 Vitest를 사용하여 테스팅 환경을 설정하는 방법을 알아보겠습니다.

테스팅이 중요한 이유

소프트웨어 개발에서 테스팅은 다음과 같은 이유로 중요합니다:

버그 방지

코드를 작성하는 과정에서 사람이 실수를 하는 것은 자연스러운 일입니다. 하지만 이러한 실수가 제품에 영향을 미치지 않도록 하는 것이 테스팅의 주된 목적이죠. 테스팅을 통해 코드의 문제를 조기에 발견하고 수정할 수 있어요.

특히, React 애플리케이션은 사용자 인터페이스(UI)와 상호작용이 많기 때문에 예상치 못한 동작이나 오류를 방지하기 위해 꼼꼼한 테스트가 필요합니다.

코드의 안정성 보장

애플리케이션은 시간이 지남에 따라 기능이 추가되거나 변경됩니다. 이런 변화가 기존의 코드에 영향을 미치지 않도록 테스팅이 필요합니다.

리팩토링을 수행할 때, 테스트가 기존 기능의 안정성을 확인해 주는 안전망 역할을 하지요.

문서화

테스트 코드는 코드가 어떻게 동작해야 하는지를 명시적으로 보여주는 "실행 가능한 문서"의 역할을 합니다. 팀원이 코드의 의도를 이해하거나, 새로운 사람이 프로젝트에 합류할 때 테스트를 통해 코드의 사용 방법과 기대 동작을 쉽게 파악할 수 있습니다.

특히 사용자 스토리와 시나리오와 대응하는 테스트 코드를 작성하는 경우, 문서로써 테스트 코드의 역할이 커집니다.

협업 효율성 향상

테스팅은 팀원들 간의 신뢰를 높여줍니다. 코드 리뷰 과정에서 테스트 결과를 확인함으로써 변경 사항이 기존 코드에 영향을 미치지 않는다는 점을 증명할 수 있지요. 테스트는 코드 품질에 대한 기준을 제공하므로, 협업 시 불필요한 논쟁을 줄이고 생산성을 높입니다.

유지보수 비용 절감

초기에 테스트를 작성하는 데 시간이 들더라도, 장기적으로는 오류를 수정하는 비용을 크게 줄일 수 있습니다.

시간이 지날수록 코드에서 냄새가 나기 시작하는데, 이를 리팩토링을 하는 데 테스트 코드가 큰 역할을 합니다. 테스트 코드가 없으면 사소한 이름 변경 마저도 크게 부담이 됩니다.

테스팅의 종류

테스팅 방법은 분류에 따라 조금씩 다르지만, 기본적으로 세 가지로 분류합니다.

푸딩캠프, 테스팅 특강 자료 중에서.

단위(Unit) 테스트

개별 함수, 모듈, 또는 컴포넌트가 독립적으로 예상대로 동작하는지 확인하는 테스트입니다. 리액트에서는 보통 단일 컴포넌트나 해당 컴포넌트의 특정 로직을 테스트합니다. 예를 들면, 클릭하면 컴포넌트 상태가 변경되거나 특정 콜백(callback) 함수가 호출되는지 확인합니다.

통합(Integration) 테스트

여러 컴포넌트나 모듈이 함께 동작할 때, 예상한 대로 상호작용하는지 확인합니다. 리액트에서는 부모-자식 컴포넌트 간의 데이터 전달, API 호출 결과가 UI에 올바르게 반영되는지 등을 테스트하죠.

종단(E2E) 테스트

애플리케이션의 전체 작업흐름을 사용자의 관점에서 시뮬레이션하여 테스트합니다. 리액트 애플리케이션에서는 Cypress나 Playwright 같은 도구를 사용해 사용자가 페이지를 탐색하거나 버튼을 클릭하는 등 실제 사용 시나리오를 검증할 수 있습니다. 마치 사람이 서비스를 사용하는 걸 프로그램이 흉내내듯이 동작합니다. 또는 매크로 프로그램처럼요.

Vitest 소개

Vitest는 빠르고 간결한 테스팅 프레임워크로, 리액트로 개발하며 테스트를 작성하고 실행하는 데 적합합니다. Jest와 비슷한 사용성을 제공하지만, 더 빠른 속도, 간결한 설정과 사용법이 장점이지요. 또한 Jest와도 높은 수준으로 호환도 되어 많은 Jest 자료를 참고할 수 있어요.

Vitest 설치

최신 버전 Vitest를 설치하겠습니다. 셸에서 다음 명령어를 실행합니다.

pnpm add -D vitest

그리고 추가로 필요한 패키지도 함께 설치합니다.

pnpm add -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

Vitest 설정 파일 수정

vite.config.js 파일을 열어 다음과 같이 만듭니다. Vite 동작 상에서 테스팅 환경을 설정한 것입니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./setupTests.js'],
  },
})

다음엔 package.json 파일이 있는 경로에 setupTests.js 파일을 만들고 다음 내용을 추가합니다.

import '@testing-library/jest-dom/vitest';
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from '@testing-library/jest-dom/matchers';

// 테스트 매처 확장
expect.extend(matchers);

// 각 테스트 후 클린업
afterEach(() => {
  cleanup();
});

이번엔 같은 경로에 vitest.config.js 파일을 만들고 다음 내용을 넣습니다.

/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  root: "./",
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./setupTests.js'],
    environmentOptions: {
      jsdom: {
        resources: 'usable',
      }
    },
    include: [
      "src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
    ],
  },
});

마지막으로 package.json 파일에 테스트를 실행하는 스크립트 명령어를 추가합니다.

package.json에 테스트 스크립트를 추가합니다:

{
  "scripts": {
    // 기존 파일 내용
    "test": "vitest"
  }
}

테스팅 설정이 잘 되었는지 시험 실행해서 확인해볼까요? pnpm test를 실행해보세요.

현재 아무런 테스트 코드가 없어서 No test files found 라는 메시지와 함께 종료됩니다. 테스트 실행 자체는 잘 됩니다.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠