React 테스팅 방법과 자동화 도구의 활용

React 테스팅의 필요성과 목적

React는 UI를 만들기 위한 프론트엔드 프레임워크로, 컴포넌트라는 재사용 가능하고 독립적인 UI 요소를 만들고 조합하여 복잡한 UI를 구성할 수 있습니다. React는 가상 DOM이라는 기술을 사용하여 UI의 변화를 효율적으로 감지하고 렌더링합니다.

React로 개발한 애플리케이션은 사용자와 상호작용하면서 다양한 상태와 이벤트를 처리해야 합니다. 이때, 버그나 오류가 발생하지 않도록 코드의 품질과 기능을 검증하고 보장하는 것이 중요합니다. 이를 위해 React 테스팅이 필요합니다.

 

React 테스팅의 목적은 다음과 같습니다.

- 코드의 정확성과 안정성을 확인하고 개선할 수 있습니다.

- 코드의 가독성과 유지보수성을 높일 수 있습니다.

- 리팩토링이나 추가 개발 시에도 기존의 기능이 올바르게 작동하는지 확인할 수 있습니다.

- 사용자의 요구사항과 기대에 부응하는 UI를 제공할 수 있습니다.

 

React 테스팅에 사용되는 주요 도구와 개념

React 테스팅에 사용되는 주요 도구와 개념은 다음과 같습니다.

Jest: Facebook에서 만든 JavaScript 테스팅 프레임워크로, React 애플리케이션을 쉽게 테스트할 수 있도록 지원합니다. Jest는 다음과 같은 장점을 가집니다.

- 별도의 설정 없이 바로 사용할 수 있습니다. create-react-app으로 생성한 프로젝트에는 Jest가 이미 내장되어 있습니다.

다양한 테스트 유틸리티와 단언(assertion) 함수를 제공합니다. 예를 들어, expect, test, describe, beforeEach, afterEach 등이 있습니다.

- 스냅샷 테스팅(snapshot testing)을 지원합니다. 스냅샷 테스팅은 컴포넌트의 출력을 파일로 저장하고, 변경사항이 발생할 때마다 비교하여 차이점을 알려줍니다.

- 모의 객체(mock object)를 생성하고 관리할 수 있습니다. 모의 객체는 실제 객체의 기능을 흉내내거나 가로채어 테스트에 영향을 주지 않도록 합니다. 예를 들어, axios나 fetch와 같은 외부 API 요청을 모의 객체로 대체할 수 있습니다.

- 코드 커버리지(code coverage)를 측정하고 보고할 수 있습니다. 코드 커버리지는 테스트가 얼마나 많은 코드를 검증했는지를 나타내는 지표입니다.

 

React Testing Library: React 컴포넌트를 테스트하기 위한 라이브러리로, 사용자의 관점에서 테스트를 작성할 수 있도록 돕습니다. React Testing Library는 다음과 같은 장점을 가집니다.

 

- 컴포넌트의 구현 세부사항에 의존하지 않고, 실제 DOM 노드에 접근하고 조작할 수 있습니다. 예를 들어, getByText, getByRole, fireEvent 등의 함수를 사용할 수 있습니다.

- 컴포넌트의 라이프사이클과 상태 변화를 자동으로 처리해줍니다. 예를 들어, act 함수를 사용하여 비동기 작업이 완료될 때까지 기다렸다가 테스트를 진행할 수 있습니다.

- Jest와 호환되며, create-react-app에 이미 설치되어 있습니다.

 

Jest와 React Testing Library를 이용한 테스트 코드 작성 예시

Jest와 React Testing Library를 이용하여 간단한 테스트 코드를 작성해보겠습니다. 다음과 같은 Counter 컴포넌트가 있다고 가정합니다.

// Counter.js

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>The current count is {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

 

테스트 자동화를 위한 도구

테스트 자동화를 위한 도구와 방법에 대해 알아보겠습니다.

- npm scripts: npm은 Node.js의 패키지 관리자로, package.json 파일에 스크립트를 정의하고 실행할 수 있습니다. 예를 들어, 다음과 같이 test라는 스크립트를 정의할 수 있습니다.

{
  "scripts": {
    "test": "jest"
  }
}

 

이렇게 하면 터미널에서 npm test 명령어를 입력하면 jest가 실행됩니다. 또한, 다른 스크립트와 함께 연결하거나, 특정 옵션을 추가하거나, 여러 스크립트를 병렬로 실행할 수도 있습니다. 예를 들어, 다음과 같이 lint와 test 스크립트를 연결할 수 있습니다.

{
  "scripts": {
    "lint": "eslint src",
    "test": "npm run lint && jest"
  }
}

 

이렇게 하면 npm test 명령어를 입력하면 eslint가 먼저 실행되고, 오류가 없으면 jest가 실행됩니다. npm scripts는 간단하고 쉽게 테스트 자동화를 구현할 수 있는 방법입니다.

 

GitHub Actions: GitHub Actions는 GitHub에서 제공하는 CI/CD (Continuous Integration/Continuous Delivery) 서비스입니다. GitHub Actions를 사용하면 GitHub 저장소에 코드를 푸시하거나 풀 리퀘스트를 생성할 때마다 테스트를 자동으로 실행하고 결과를 확인할 수 있습니다. GitHub Actions는 다음과 같은 장점을 가집니다.

 - 별도의 서버나 인프라를 구축할 필요가 없습니다. GitHub에서 모든 작업을 처리해줍니다.

- 다양한 운영체제와 노드 버전을 지원합니다. 예를 들어, Windows, Linux, Mac OS에서 Node.js 10, 12, 14 버전으로 테스트를 할 수 있습니다.

- 다양한 액션(action)을 사용할 수 있습니다. 액션은 특정 작업을 수행하는 재사용 가능한 코드 조각입니다. 예를 들어, 캐시, 코드 커버리지 업로드, 슬랙 알림 등의 액션을 사용할 수 있습니다.

 

GitHub Actions를 사용하기 위해서는 .github/workflows 폴더에 YAML 파일을 생성하고 워크플로우(workflow)를 정의해야 합니다. 워크플로우는 트리거(trigger), 작업(job), 단계(step), 액션(action)으로 구성됩니다. 예를 들어, 다음과 같은 워크플로우 파일을 작성할 수 있습니다.

# .github/workflows/test.yml

# 워크플로우의 이름을 정의합니다.
name: Test

# 워크플로우의 트리거를 정의합니다.
# main 브랜치에 푸시하거나 풀 리퀘스트가 생성될 때마다 워크플로우가 실행됩니다.
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

# 워크플로우의 작업을 정의합니다.
jobs:
  # test라는 작업을 정의합니다.
  test:
    # 작업이 실행될 운영체제와 노드 버전을 정의합니다.
    # 여러 개의 운영체제와 노드 버전으로 테스트를 할 수 있습니다.
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest, macos-latest]
        node: [10, 12, 14]
    # 작업이 실행될 러너(runner)를 정의합니다.
    # 러너는 GitHub에서 제공하는 가상 머신입니다.
    runs-on: ${{ matrix.os }}
    # 작업이 수행할 단계를 정의합니다.
    steps:
      # 첫 번째 단계에서는 GitHub 저장소의 코드를 러너에 복사합니다.
      - name: Checkout code
        uses: actions/checkout@v2
      # 두 번째 단계에서는 노드 버전을 설정합니다.
      - name: Use Node.js ${{ matrix.node }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node }}
      # 세 번째 단계에서는 npm install 명령어로 의존성을 설치합니다.
      - name: Install dependencies
        run: npm install
      # 네 번째 단계에서는 npm test 명령어로 테스트를 실행합니다.
      - name: Run tests
        run: npm test

 

이렇게 하면 GitHub Actions가 워크플로우 파일을 읽고 테스트를 자동으로 실행하고 결과를 보여줍니다. GitHub Actions는 테스트 자동화를 위한 강력하고 유연한 방법입니다.

이번엔 테스트 자동화를 위한 도구와 방법에 대해 알아보았습니다. Jest와 React Testing Library를 사용하면 React 컴포넌트를 쉽고 효과적으로 테스트할 수 있습니다. npm scripts와 GitHub Actions를 사용하면 테스트를 자동으로 실행하고 결과를 확인할 수 있습니다. React 테스팅은 코드의 품질과 기능을 검증하고 보장하는 데 도움이 되므로, 꾸준히 실천하고 개선하는 것이 좋습니다.