AWESOMEDEV
8058a89304
단위(순수함수)와 E2E(전체 흐름) 사이 '부품 렌더링' 층을 메운다(jsdom). - Badge(3): 코드값→한국어 라벨/색 매핑, 미지값 폴백(방어적 기본값) - ProgressBar(4): 백분율 계산·반올림, 0 나눗셈 방어(NaN 방지), 막대 너비 - CodeEditor(6): 제어 입력 왕복, 줄번호 minRows 보장/증가, Tab 공백2칸 삽입, 텍스트 선택 후 Tab 커서 위치(selectionStart+2 회귀 방지 — 과거 버그 못 박기) 세팅: @testing-library/react+jest-dom+user-event+jsdom, 파일별 @vitest-environment, 매 테스트 후 cleanup(globals 미사용 시 DOM 누적 방지). 프론트 테스트 9→22. coverage 게이트·lint·build 통과. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
42 lines
2.0 KiB
JavaScript
42 lines
2.0 KiB
JavaScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
// 학습 포인트: 개발 중엔 프론트(5173)가 /api 요청을 백엔드(8080)로 넘겨줍니다(프록시).
|
|
// 운영에선 nginx/Caddy가 같은 역할을 합니다.
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
server: {
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8080',
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
},
|
|
// 학습 포인트: 테스트가 "로직 계층(src/lib)"의 몇 %를 실행하는지 측정한다.
|
|
// UI 컴포넌트가 아니라, 채점·검증 같은 순수 로직에 안전망이 있는지가 중요.
|
|
// npm run coverage → 터미널 표 + coverage/index.html.
|
|
test: {
|
|
// vitest(단위 테스트)는 src/ 만 대상으로 한다.
|
|
// 학습 포인트: vitest는 기본으로 *.spec.js도 잡는데, e2e/의 Playwright 스펙(*.spec.js)은
|
|
// 브라우저 러너(Playwright)로만 돌아야 한다. 여기서 범위를 src로 좁혀 둘을 분리한다.
|
|
include: ['src/**/*.{test,spec}.{js,jsx}'],
|
|
// 컴포넌트 테스트가 시작 전에 화면용 단언(jest-dom)을 불러오게 한다.
|
|
// 환경(jsdom vs node)은 파일 상단의 // @vitest-environment 주석으로 파일별로 정한다
|
|
// — 순수 로직 테스트(runSql)는 node 그대로 두고, 컴포넌트 테스트만 jsdom을 쓴다.
|
|
setupFiles: ['./src/test/setup.js'],
|
|
coverage: {
|
|
provider: 'v8',
|
|
include: ['src/lib/**'],
|
|
exclude: ['src/lib/**/*.test.js'],
|
|
reporter: ['text', 'html'],
|
|
// 채점 로직(runSql.js)엔 바닥을 건다 — 이 안전망을 지우면 CI 빨간불.
|
|
// glossary(데이터)·postcode/runJs(브라우저 연동)는 순수 유닛테스트 대상이 아니라 게이트 제외.
|
|
// 학생이 다른 로직에 테스트를 붙이면 여기에 파일을 추가해 바닥을 넓히는 게 목표.
|
|
thresholds: {
|
|
'src/lib/runSql.js': { lines: 40 },
|
|
},
|
|
},
|
|
},
|
|
})
|