Vitest: Jest를 대체하는 차세대 테스팅 프레임워크

pnpm add -D vitest

// vite.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'node',
    globals: true,
  },
})

// src/utils/math.test.ts
import { describe, it, expect } from 'vitest'

function sum(a: number, b: number) {
  return a + b
}

describe('sum', () => {
  it('두 숫자를 더한다', () => {
    expect(sum(1, 2)).toBe(3)
  })

  it('음수도 처리한다', () => {
    expect(sum(-1, 1)).toBe(0)
  })
})

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

pnpm test

import { describe, it, expect, vi } from 'vitest'

const fetchUser = vi.fn()
fetchUser.mockResolvedValue({ id: 1, name: 'Alice' })

describe('UserService', () => {
  it('사용자를 조회한다', async () => {
    const user = await fetchUser(1)

    expect(fetchUser).toHaveBeenCalledWith(1)
    expect(user).toEqual({ id: 1, name: 'Alice' })
  })

  it('호출 횟수를 추적한다', () => {
    const callback = vi.fn()

    callback('a')
    callback('b')

    expect(callback).toHaveBeenCalledTimes(2)
    expect(callback).toHaveBeenLastCalledWith('b')
  })
})

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'

describe('Timer', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  afterEach(() => {
    vi.useRealTimers()
  })

  it('1초 후에 콜백을 실행한다', () => {
    const callback = vi.fn()

    setTimeout(callback, 1000)
    vi.advanceTimersByTime(1000)

    expect(callback).toHaveBeenCalledOnce()
  })
})

# Jest + TypeScript 설정 (비교용)
pnpm add -D jest ts-jest @types/jest
# jest.config.ts에서 transform 설정
# tsconfig.json에서 types 설정

import { describe, it, expectTypeOf } from 'vitest'

interface User {
  id: number
  name: string
  email: string
}

type CreateUserInput = Omit<User, 'id'>

describe('User 타입', () => {
  it('필요한 프로퍼티를 가진다', () => {
    expectTypeOf<User>().toHaveProperty('id')
    expectTypeOf<User>().toHaveProperty('name')
    expectTypeOf<User>().toHaveProperty('email')
  })

  it('CreateUserInput에는 id가 없다', () => {
    expectTypeOf<CreateUserInput>().not.toHaveProperty('id')
    expectTypeOf<CreateUserInput>().toMatchTypeOf<{ name: string; email: string }>()
  })
})

// src/utils/math.ts
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0)
}

export function multiply(a: number, b: number) {
  return a * b
}

// 테스트 코드 — 프로덕션 빌드에서는 자동 제거됨
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest

  it('add', () => {
    expect(add()).toBe(0)
    expect(add(1)).toBe(1)
    expect(add(1, 2, 3)).toBe(6)
  })

  it('multiply', () => {
    expect(multiply(2, 3)).toBe(6)
  })
}

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'],
  },
  define: {
    'import.meta.vitest': 'undefined',
  },
})

pnpm add -D @vitest/browser-playwright

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [
        { browser: 'chromium' },
      ],
    },
  },
})

import { expect, it } from 'vitest'
import { page } from '@vitest/browser/context'

it('버튼 스크린샷이 일치한다', async () => {
  await expect.element(page.getByRole('button')).toMatchScreenshot('primary-button')
})

it('요소가 뷰포트에 보인다', async () => {
  await expect.element(page.getByTestId('hero')).toBeInViewport()
})

pnpm add -D @vitest/coverage-v8

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      include: ['src/**/*.{ts,tsx}'],
      exclude: ['**/*.test.ts', '**/*.spec.ts'],
      reporter: ['text', 'json', 'html'],
    },
  },
})

pnpm vitest run --coverage

import { expect, it } from 'vitest'

// 일반 스냅샷 (.snap 파일 생성)
it('결과가 스냅샷과 일치한다', () => {
  const result = generateHTML()
  expect(result).toMatchSnapshot()
})

// 인라인 스냅샷 (테스트 파일 내에 직접 기록)
it('대문자 변환', () => {
  const result = toUpperCase('hello')
  expect(result).toMatchInlineSnapshot('"HELLO"')
})

// 파일 스냅샷 (특정 파일과 비교)
it('HTML 출력이 일치한다', async () => {
  const html = renderComponent()
  await expect(html).toMatchFileSnapshot('./snapshots/component.html')
})