Svelte 프로젝트를 위한 Vitest 설정
컴포넌트 테스트를 위해 Svelte 플러그인과 jsdom 환경으로 Vitest를 구성합니다.
Svelte 프로젝트를 위한 Vitest 설정은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Vitest
Vitest는 Svelte 생태계에서 널리 사용되는 빠르고 Vite에 특화된 테스트 실행기입니다.
설치
Vitest와 Svelte 플러그인을 추가합니다.
npm install -D vitest @vitest/coverage-v8 @testing-library/svelte @testing-library/jest-dom jsdomvite.config.js에서 설정
테스트 섹션을 추가합니다.
export default defineConfig({
plugins: [sveltekit()],
test: { environment: "jsdom", globals: true, setupFiles: ["./vitest-setup.js"] }
});설정 파일
vitest-setup.js에서 jest-dom 매처를 가져옵니다.
import "@testing-library/jest-dom";테스트 실행
package.json에 스크립트를 추가하고 실행합니다.
"test": "vitest"감시 모드
Vitest는 기본적으로 감시 모드로 실행되므로 TDD에 적합합니다.
TypeScript
Vitest는 형식을 인식하는 어설션과 함께 TypeScript를 기본적으로 지원합니다.
커버리지
V8 커버리지 제공자를 사용하여 커버리지 보고서를 생성합니다.
npx vitest run --coverageCI 통합
예측 가능한 실행을 위해 CI에서는 감시하지 않는 모드인 vitest run을 사용합니다.
스냅샷 테스트
Vitest는 회귀 감지를 위해 Jest와 같은 스냅샷을 지원합니다.
IDE 통합
VS Code의 Vitest 확장을 사용하면 편집기 명령으로 테스트를 코드 안에서 실행할 수 있습니다.
빠른 확인
Vitest는 DOM 테스트에 어떤 환경을 사용하나요?
복습
빠른 Svelte Component 단위 테스트를 위해 jsdom, Testing Library, jest-dom과 함께 Vitest를 설정합니다.
자주 묻는 질문
“Svelte 프로젝트를 위한 Vitest 설정” 강의는 무료인가요?
네 — “Svelte 프로젝트를 위한 Vitest 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Svelte 프로젝트를 위한 Vitest 설정”에서 뭘 배우나요?
컴포넌트 테스트를 위해 Svelte 플러그인과 jsdom 환경으로 Vitest를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Svelte 프로젝트를 위한 Vitest 설정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Svelte 프로젝트를 위한 Vitest 설정
- @testing-library/svelte: render와 fireEvent
- 스토어와 반응성 테스트
- 모듈과 Fetch 모킹