[React] 컴포넌트 테스트

📌 컴포넌트 테스트

 

 

✅ Vitest 설치 및 구성

 

⏩ Vitest 패키지 설치

pnpm add -D vitest

 

 

 

⏩ Vitest UI 설치

pnpm i -D @vitest/ui

 

 

 

⏩ test, test:ui 명령 등록

package.json
{
  "scripts": {
    "test": "vitest",
    "test:ui" : "vitest --ui"
  }
}

 

 

 

⏩ Vitest 사용

pnpm vitest

 

 

 

⏩ 테스트 코드 작성

• 기능 js 파일과 기능.test.js 파일 생성

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum.js'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

⏩ Vitest 테스트 실행

pnpm t