Vue 프로젝트의 Vitest 설정

Vue에 Vitest를 사용하는 이유

도구 설치하기

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

jsdom 환경

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

전역 기능 활성화하기

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

전역 기능용 TypeScript 유형

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

첫 테스트 파일

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

컴포넌트 마운트하기

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

커버리지 추가하기

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

HTML 커버리지 보고서

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

package.json 스크립트

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

감시 모드와 실행 모드

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

빠른 확인

복습