[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축

코드 품질을 보장하고, 기능이 의도한 대로 동작하는지 확인하기 위해 테스트 코드를 작성한다. 특히 기능 추가나 리팩토링을 할 때 테스트 코드가 있으면 기존 기능이 올바르게 작동하는지 쉽게 확인할 수 있고, 심리적인 안정감을 주는 장점도 있다. 프론트엔드 테스트 종류는 크게 단위 테스트, 통합 테스트, E2E 테스트, 정적 테스트로 나뉜다.

테스트 종류	설명	예시	주요 도구
단위 테스트(Unit Test)	개별 함수, 컴포넌트, 모듈의 동작 검증	버튼 클릭 시 특정 함수 호출 여부	Jest, Vitest, Mocha, Jasmine 등
통합 테스트(Integration Test)	여러 모듈이 함께 잘 작동하는지 확인	상품 구매 시 잔액 업데이트, 재고 변경	Jest, Vitest, React Testing Library 등
E2E 테스트(End To End Test)	사용자 관점에서 전체 애플리케이션의 흐름 테스트	로그인부터 상품 구매까지의 전체 과정	Cypress, Selenium, Playwright, Puppeteer 등
정적 테스트(Static Test)	코드 실행 없이 소스 코드 자체 분석	TypeScript 타입 검사, ESLint 코드 스타일 검증	ESLint, Prettier, TypeScript 등

아래에서 Vitest, React Testing Library를 이용해 테스트 환경을 구축하는 방법에 대해 알아보자(Vite, React, TypeScript 기반).

Vitest는 Vite 기반 테스트 프레임워크로 Vite 설정과 플러그인을 그대로 사용할 수 있고, 대부분의 Jest API와 호환된다. React Testing Library는 버튼 클릭, 텍스트 입력 등 컴포넌트를 실제 사용자처럼 상호작용하며 테스트하도록 설계된 도구다.

테스트 환경 구축

💡 패키지 매니저는 pnpm을 사용했다.

기본 설정

❶ 패키지 설치

pnpm i -D vitest @testing-library/react @testing-library/jest-dom jsdom

vitest : vite 기반 테스트 러너
@testing-library/react : 컴포넌트 테스트 패키지
@testing-library/jest-dom : DOM 요소의 특정 상태/속성 테스트 패키지(매처)
jsdom : Node에서 브라우저 환경 시뮬레이션 패키지

❷ vite.config.ts 파일 수정

/// <reference types="vitest" />
/// <reference types="vite/client" />

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

export default defineConfig({
  plugins: [react()],
  test: {
    // describe, it 등 전역 테스트 함수를 import 없이 사용할 수 있도록 설정
    globals: true,
    // jsdom 환경을 사용하여 브라우저 환경 시뮬레이션
    environment: 'jsdom',
    // 테스트 실행 전 특정 파일이나 스크립트를 실행하도록 지정
    setupFiles: ['./src/setup-tests.ts'],
  },
});

❸ src 폴더에 setup-tests.ts 파일 생성

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

/**
 * jest-dom 에서 제공하는 매처를 Vitest expect 함수에서 사용할 수 있도록 확장
 * 매처는 toBeInTheDocument 등과 같은 DOM 상태를 검증하는 메서드
 * */
expect.extend(matchers);

afterEach(() => {
  cleanup(); // 각 테스트 종료 후 DOM 에 렌더링된 요소 제거
});

❹ package.json 스크립트 추가 (설정 시pnpm test 명령어로 테스트 실행 가능)

{
  "scripts": {
    // ...
    "test": "vitest"
  }
}

❺ tsconfig.app.json 수정 (Vitest, Testing Library 타입 정의 추가)

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "types": ["vitest/globals", "@testing-library/jest-dom"] // 추가

    // ...
  },
  "include": ["src"]
}

위처럼 타입 정의를 추가해 두면 TS2582 에러가 사라진다.

테스트 코드 작성

💡 getByRole 함수의 name 옵션은 접근성 이름을 가리키며, 아래 방법으로 설정될 수 있다.

App.test.tsx 파일 생성 → 아래 테스트 코드를 추가한 후 터미널에 pnpm test 를 입력해 보자. 1 passed 표시가 나오면 테스트 환경설정이 성공적으로 완료된 것이다.

// App.test.tsx
import { fireEvent, render, screen } from '@testing-library/react';
import App from './App.tsx';

describe('App component', () => {
  test('increments count when button is clicked', () => {
    render(<App />);

    const button = screen.getByRole('button', { name: /count is \d/i });
    fireEvent.click(button);
    expect(button).toHaveTextContent('count is 1');
  });
});

코드 커버리지

코드 커버리지는 테스트 케이스가 소스 코드의 얼마나 많은 부분을 실행했는지 백분율로 나타낸 지표다. 코드 커버리지는 주로 아래 측정 기준을 통해 평가된다.

Statement Coverage : 각 구문이 최소 1회 이상 실행됐는지 측정
Branch Coverage : 조건문(if/else)의 각 분기가 실행됐는지 측정
Function Coverage : 정의된 함수들이 최소 1회 이상 호출됐는지 측정
Line Coverage : 각 라인이 최소 1회 이상 실행됐는지 측정

Vitest에서도 v8(기본값) 혹은 istanbul 공급자를 통해 코드 커버리지를 확인할 수 있다.

❶ v8 공급자 설치

pnpm i -D @vitest/coverage-v8

❷ package.json 스크립트 추가

{
  "scripts": {
    // ...
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

이제 터미널에 pnpm coverage를 입력하면 텍스트 형식의 커버리지 현황을 콘솔에 출력하고, coverage/ 디렉터리에 index.html 같은 보고서가 자동으로 생성된다.

커버리지 관련 구성은 vite.config.ts 파일 coverage 속성에서 변경할 수 있다. 기본적으로 테스트를 실패했을 땐 커버리지 보고서를 생성하지 않는데, coverage.reportOnFailure 값을 true로 바꾸면 테스트 실패 시에도 생성된다. 이 외에도 출력 방식 지정을 지정하는 coverage.reporter 등 다양한 옵션을 제공한다.

// vite.config.ts
// ...

export default defineConfig({
  // ...
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setup-tests.ts'],
    coverage: {
      /** 커버리지 공급자 지정. 기본값 v8 */
      provider: 'v8',
      /** 테스트 커버리지 결과 출력 방식 지정 ('text' 추가하면 텍스트 형식으로 콘솔에 출력) */
      reporter: ['text', 'html'],
      /** 테스트 실패 시 커버리지 생성 여부 */
      reportOnFailure: true,
    },
  },
});

Vitest UI

Vitest UI는 테스트 현황을 보다 쉽게 확인하고 상호작용 할 수 있는 기능을 제공하는 도구다. 웹 UI를 통해 테스트를 실행하거나 결과를 실시간으로 확인할 수 있고, 테스트 케이스를 클릭해서 상세한 정보를 볼 수도 있다.

❶ 패키지 설치

pnpm i -D @vitest/ui

❷ Vitest UI 실행 (package.json 파일에 test:ui 등 명령어로 입력해 두면 편하다)

vitest --ui

❸ Vitest UI에서 커버리지 현황도 보고 싶다면 vite.config.ts 파일의 enabled 속성을 true로 변경한다.

// vite.config.ts
// ...

export default defineConfig({
  // ...
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setup-tests.ts'],
    coverage: {
      /** 커버리지 기능 활성 */
      enabled: true,
      /** 커버리지 공급자 지정. 기본값 v8 */
      provider: 'v8',
      /** 테스트 커버리지 결과 출력 방식 지정 ('text' 추가하면 텍스트 형식으로 콘솔에 출력) */
      reporter: ['text', 'html'],
      /** 테스트 실패 시 커버리지 생성 여부 */
      reportOnFailure: true,
    },
  },
});

커버리지 기능을 활성화하면 Vitest UI 상단에 커버리지 아이콘이 추가된다

CI 구축

지속적 통합(CI; Continuous Integration)은 코드 변경 사항에 대해 자동화된 빌드와 테스트를 수행한 후 메인 레포지토리에 정기적으로 병합하는 개발 방식을 가리킨다. 이를 통해 버그를 신속하게 찾아 해결하고, 소프트웨어 릴리즈 주기를 단축시킬 수 있다. 예를 들어 PR(Pull Request)을 생성하거나, 메인 저장소에 병합할 때마다 테스트를 자동으로 실행하도록 설정해서 코드 품질을 보장할 수 있다.

GitHub Actions를 이용해 새로운 PR이 생성되면 타입 체크, Lint 체크, 테스트, 커버리지 요약 보고서 코멘트까지 자동으로 만들어주는 설정을 해보자.

타입 / 린트 체크

먼저 .github/workflows 폴더에 ci.yaml 파일을 생성한다. GitHub Actions 워크플로우는 yaml 파일을 통해서 설정할 수 있으며, yaml 파일은 항상 workflows 폴더에 위치해 있어야 한다.

📦 Project Root
└─ .github
   └─ workflows
      └─ ci.yaml

그 후 아래 내용을 ci.yaml 파일에 붙여 넣는다. 워크플로우의 각 작업(Job)은 독립적으로 (병렬) 실행되기 때문에 매번 node, pnpm 설치가 필요하지만, 캐시 기능을 이용해 기존 설치했던 의존성 모듈을 재사용할 수 있다.

# ci.yaml
name: CI

on:
  push:
    branches: [main] # main 브랜치에 push하면 워크플로우 실행
  pull_request:
    branches: [main] # main 브랜치로 Pull Request를 생성하면 워크플로우 실행
  workflow_dispatch: # 수동 트리거 기능 활성

jobs:
  # 첫 번째 Job
  lint:
    runs-on: ubuntu-latest
    steps:
      # 워크플로우 실행 중 저장소 코드를 가져와서 사용하기 위한 액션
      - name: Checkout repository
        uses: actions/checkout@v4

      # pnpm 설치 액션. 캐시 사용을 위해 actions/setup-node@v4 보다 먼저 설치
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: latest
          run_install: false

      # Node.js를 설치하고 pnpm 의존성 캐시 활성화
      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'pnpm'

      # 프로젝트 의존성 설치
      - name: Install dependencies
        run: pnpm install

      # ESLint 실행
      - name: Run ESLint
        run: pnpm lint

  # 두 번째 Job
  type-check:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: latest
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      # 타입 체크 실행
      - name: Type check
        run: pnpm type-check

💡 yaml 파일에서 with 키워드는 주로 액션의 입력 매개변수를 지정할 때 사용한다. with는 uses 키워드 다음에 위치하며, with 아래에는 키-값 쌍 형태로 매개변수를 지정한다. with로 지정된 입력 매개변수는 액션 실행 시 환경 변수로 변환된다.

테스트 / 커버리지

테스트와 커버리지를 체크하기 위해 test-and-coverage 이름의 작업(Job)을 아래처럼 추가한다. needs 속성은 작업 간 의존성을 정의해서 실행 순서를 제어할 때 사용하는데, lint, type-check 작업을 완료했을 때만 test-and-coverage 작업을 실행하기 위해 추가했다.

# ci.yaml
name: CI

on:
  # ... 생략

jobs:
  lint:
    # ... 생략

  type-check:
    # ... 생략

  test-and-coverage:
    # lint, type-check 작업을 완료해야만 실행
    needs: [lint, type-check]
    runs-on: ubuntu-latest

    steps:
      # checkout, node/pnpm/의존성 설치 step 코드 생략

      - name: Run tests and coverage
        # package.json - scripts 속성에 추가한 coverage 명령어 실행
        run: pnpm coverage

이제 PR을 생성하고 Actions 메뉴로 들어가 보면 테스트와 커버리지 검사 결과를 출력하는 걸 확인할 수 있다.

테스트 보고서 코멘트 / 어노테이션

publish-unit-test-result-action 액션을 이용해서 테스트 보고서를 PR 코멘트로 남기도록 설정할 수 있다.

이 액션에서 자바스크립트는 JUnit 형식만 지원하기 때문에 vite.config.ts 구성 파일을 아래처럼 수정해야 한다. reporters 속성에서 default는 터미널 출력 형식을 의미한다. PR 페이지 Files-changed 탭에서 테스트를 실패한 코드에 어노테이션을 표시하려면 github-actions도 추가해 둔다. 워크플로우가 실행중일 땐 GITHUB_ACTIONS 환경 변수가 true로 설정되기 때문에 이를 이용해 reporters 값을 조건부로 지정했다.

// vite.config.ts
// ...

export default defineConfig({
  // ...
  test: {
    // ...
    /** 테스트 실행 결과 리포트 형식 지정 */
    reporters: process.env.GITHUB_ACTIONS
      ? ['default', 'junit', 'github-actions']
      : ['default', 'junit'],
    /** 테스트 결과 파일 이름 지정 */
    outputFile: 'test-results.xml',
    // ...
  },
});

액션 실행을 위해 ci.yaml 파일 test-and-coverage 작업의 권한(permissions)을 아래처럼 수정한다.

# ci.yaml
name: CI

on:
  # ...생략

jobs:
  lint:
    # ...생략

  type-check:
    # ...생략

  test-and-coverage:
    needs: [lint, type-check]
    runs-on: ubuntu-latest

    # (추가) 비공개 저장소는 아래 4개 권한 필요. 공개 저장소는 checks, pull-requests 권한 필요
    permissions:
      contents: read
      pull-requests: write
      issues: read
      checks: write

    steps:
      # checkout, node/pnpm/의존성 설치 step 코드 생략

      - name: Run tests and coverage
        run: pnpm coverage

      # (추가)
      - name: Publish Test Results
        uses: EnricoMi/publish-unit-test-result-action@v2
        # 이전 step 성공 여부와 상관없이 이 step 항상 실행
        if: always()
        with:
          # vite.config.ts - test.outputFile 속성에 설정한 파일 이름
          files: test-results.xml
          # 보고서 헤더 이름 지정
          check_name: Unit Test Report

커버리지 보고서 코멘트

vitest-coverage-report-action 액션을 이용해서 커버리지 보고서를 PR 코멘트로 남기도록 설정할 수 있다.

커버리지 보고서를 생성하기 위해 vite.config.ts 파일을 아래처럼 수정한다. 이 액션은 json-summary 리포터(reporter)가 필수로 포함되어야 하며, File Coverage도 생성하려면 json 리포터도 추가해야 한다. 커버리지 보고서의 Status 항목은 기본적으로 파란색 🔵 원으로 나오는데, 임계값(thresholds)을 설정해 두면 임계값을 충족하지 않았을 때 빨간색 🔴원으로 표시해 준다.

// vite.config.ts
// ...

export default defineConfig({
  // ...
  test: {
    // ...
    coverage: {
      // ...
      /** 커버리지 기능 활성화 */
      enabled: true,
      /** 테스트 커버리지 결과 출력 방식 지정 */
      reporter: ['text', 'html', 'json', 'json-summary'],
      /** 테스트 실패 시 커버리지 생성 여부 */
      reportOnFailure: true,
      /** 커버리지 임계값 설정 */
      thresholds: { lines: 70, branches: 70, functions: 70, statements: 70 },
    },
  },
});

그 후 ci.yaml 파일에 Report Coverage 스텝을 추가한다. if: always() 속성이 올바르게 작동하려면(항상 커버리지 리포트 생성) vite.config.ts 파일의 reportOnFailure 속성을 true로 설정해야 한다.

# ci.yaml
name: CI

on:
  # ...생략

jobs:
  lint:
    # ...생략

  type-check:
    # ...생략

  test-and-coverage:
    needs: [lint, type-check]
    runs-on: ubuntu-latest

    permissions:
      contents: read
      pull-requests: write
      issues: read
      checks: write

    steps:
      # checkout, node/pnpm/의존성 설치 step 코드 생략

      - name: Run tests and coverage
        run: pnpm coverage

      - name: Publish Test Results
        uses: EnricoMi/publish-unit-test-result-action@v2
        if: always()
        with:
          files: test-results.xml
          check_name: Unit Test Report

      # (추가)
      - name: Report Coverage
        # 이전 step 결과에 상관없이 이 step 항상 실행 (항상 커버리지 리포트 생성)
        # vite.config.ts 파일에서 reportOnFailure: true로 설정 필요
        if: always()
        uses: davelosert/vitest-coverage-report-action@v2

최종 코드

name: CI

on:
  push:
    branches: [main] # main 브랜치에 push 하면 워크플로우 실행
  pull_request:
    branches: [main] # main 브랜치로 Pull Request 를 생성하면 워크플로우 실행
  workflow_dispatch: # 수동 트리거 기능 활성

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      # 워크플로우 실행 중 저장소 코드를 가져와서 사용하기 위한 액션
      - name: Checkout repository
        uses: actions/checkout@v4

      # pnpm 설치 액션. 캐시 사용을 위해 actions/setup-node@v4 보다 먼저 설치
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: latest
          run_install: false

      # Node.js를 설치하고 pnpm 의존성 캐시 활성화
      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'pnpm'

      # 프로젝트 의존성 설치
      - name: Install dependencies
        run: pnpm install

      - name: Run ESLint
        run: pnpm lint

  type-check:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: latest
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Type check
        run: pnpm type-check

  test-and-coverage:
    # lint, type-check 작업을 완료해야만 실행
    needs: [lint, type-check]
    runs-on: ubuntu-latest

    permissions:
      # publish-unit-test-result-action 액션에서 private 레포지토리는 아래 4개 권한 필요
      # public 레포지토리는 checks, pull-requests 2개 권한 필요
      contents: read
      pull-requests: write
      issues: read
      checks: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: latest
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Run tests and coverage
        run: pnpm coverage

      - name: Publish Test Results
        uses: EnricoMi/publish-unit-test-result-action@v2
        # 이전 step 성공 여부와 상관없이 이 step 항상 실행
        if: always()
        with:
          # vite.config.ts - test.outputFile 속성에 설정한 파일 이름
          files: test-results.xml
          # 보고서 헤더 이름 지정
          check_name: Unit Test Report

      - name: Report Coverage
        # 이전 step 결과에 상관없이 이 step 항상 실행 (항상 커버리지 리포트 생성)
        # vite.config.ts 파일에서 reportOnFailure: true로 설정 필요
        if: always()
        uses: davelosert/vitest-coverage-report-action@v2

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
import { coverageConfigDefaults } from 'vitest/config';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
    svgr({
      // svgr options: https://react-svgr.com/docs/options/
      svgrOptions: {
        exportType: 'default',
        ref: true,
        svgo: false,
        titleProp: true,
      },
      include: '**/*.svg',
    }),
  ],
  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] },
  server: { port: 3000, open: true },
  test: {
    /** describe, it 등 전역 테스트 함수를 import 없이 사용할 수 있도록 설정 */
    globals: true,
    /** jsdom 환경을 사용하여 브라우저 환경 시뮬레이션 */
    environment: 'jsdom',
    /** 테스트 실행 전 특정 파일이나 스크립트를 실행하도록 지정 */
    setupFiles: ['./src/setup-tests.ts'],
    /**
     * 테스트 실행 결과 리포트 형식 지정
     *
     * GitHub Actions 워크플로우가 실행중이면 GITHUB_ACTIONS 환경 변수는 true 로 설정됨
     * @see https://docs.github.com/ko/actions/learn-github-actions/variables#default-environment-variables
     *
     * publish-unit-test-result-action 액션에서 자바스크립트는 JUnit 만 지원해서 'junit' 추가
     * 'default' 레포터는 터미널 출력을 의미
     * 'github-actions' 추가하면 PR - Files-changed 탭에서 어노테이션 확인 가능
     * @see https://vitest.dev/guide/reporters.html#github-actions-reporter
     * */
    reporters: process.env.GITHUB_ACTIONS
      ? ['default', 'junit', 'github-actions']
      : ['default', 'junit'],
    /** 테스트 결과 파일 이름 지정 */
    outputFile: 'test-results.xml',
    include: ['**/*.test.{ts,tsx,js,jsx}'],
    coverage: {
      /** 커버리지 기능 활성화 */
      enabled: true,
      /** 커버리지 공급자 지정. 기본값 v8 */
      provider: 'v8',
      exclude: [
        ...coverageConfigDefaults.exclude,
        '**/index.ts',
        '**/*.config.{js,ts}',
        'src/{main,app}.tsx',
      ],
      /**
       * 테스트 커버리지 결과 출력 방식 지정 ('text' 추가하면 텍스트 형식으로 콘솔에 출력)
       * vitest-coverage-report-action 액션 사용하려면 'json', 'json-summary' 추가 필요
       * @see https://github.com/davelosert/vitest-coverage-report-action#usage
       * */
      reporter: ['text', 'html', 'json', 'json-summary'],
      /** 테스트 실패 시 커버리지 생성 여부 */
      reportOnFailure: true,
      /**
       * 커버리지 임계값 설정
       * @see https://github.com/davelosert/vitest-coverage-report-action#coverage-thresholds */
      thresholds: {
        lines: 70,
        branches: 70,
        functions: 70,
        statements: 70,
      },
    },
  },
});

레퍼런스

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

저작자표시 비영리 동일조건

'🪄 Programming' 카테고리의 다른 글

[Dart] 자바스크립트 개발자의 다트 학습 - Part 1 (0)	2024.08.21
[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기 (0)	2024.07.29
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색) (0)	2024.07.18
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음 (0)	2024.07.07
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등) (2)	2024.07.04

[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축

테스트 환경 구축

기본 설정

테스트 코드 작성

코드 커버리지

Vitest UI

CI 구축

타입 / 린트 체크

테스트 / 커버리지

테스트 보고서 코멘트 / 어노테이션

커버리지 보고서 코멘트

최종 코드

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

테스트 환경 구축

기본 설정

테스트 코드 작성

코드 커버리지

Vitest UI

CI 구축

타입 / 린트 체크

테스트 / 커버리지

테스트 보고서 코멘트 / 어노테이션

커버리지 보고서 코멘트

최종 코드

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[Dart] 자바스크립트 개발자의 다트 학습 - Part 1

[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기

[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)

[JS] 자바스크립트 reduce() 메서드 활용 예시 모음

티스토리툴바