Vitest로 Svelte + TS + Vite 유닛 테스트 환경 구축

1. 라이브러리 설치

npm install -D vitest @testing-library/svelte @testing-library/jest-dom jsdom

1) vitest

테스트를 실행하고 테스트 함수 제공

2) @testing-library/svelte

테스트에서 Svelte 컴포넌트를 렌더링할 수 있게 해주는 라이브러리

3) jsdom

테스트는 Node.js(브라우저 없음)에서 실행되므로, jsdom이 가짜 브라우저 환경을 제공

4) @testing-library/jsdom

DOM 요소를 테스트하기 위한 유용한 matcher를 제공

// jest-dom이 없으면:
expect(element.classList.contains('active')).toBe(true)

// jest-dom이 있으면:
expect(element).toHaveClass('active')

5) @types/jest

globals: true로 test config 설정했을 때, import {describe, ...etc} from "vitest"를 안하면 테스트는 정상실행되지만 vscode에서 타입에러로 불평하는 것을 해결하기 위해 필요하다.

2. @testing-library/jest-dom 설정

//vitest.setup.ts

import '@testing-library/jest-dom'

3. config 수정

vitest.config.ts를 별도로 만들어도 되지만 vite.config.ts에 작성할수도 있다.
이 경우 최상단에 reference를 추가해준다.

참고) vitest.config.ts 파일을 만드는 경우에는 test 실행 스크립트에 config 경로를 추가해준다.

//vite.config.ts

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

export default defineConfig({
  test: {
    include: ["src/**/**/*.test.ts"], //테스트 파일 있는 경로
    environment: "jsdom", // document, window와 같은 브라우저 API 제공
    globals: true, //테스트 파일마다 vitest import를 생략할 수 있다
    setupFiles: ["config/vite/vitest.setup.ts"] //테스트 파일이 실행되기 전에 먼저 실행된다
  },
  resolve: process.env.VITEST
    ? {
        conditions: ["browser"] // 패키지가 브라우저/노드 버전을 제공할 때 브라우저 버전을 import
      }
    : {} //기존 코드
});

//tsconfig.app.json

{
	...,
    "types": ["vitest/globals", "@testing-library/jest-dom", "@types/jest"]
  },
  "include": [
  	...,
    "src/**/**/*.test.ts"
  ]
}