패키지 설치
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 에러가 사라진다.
