본문으로 건너뛰기

테스트 전략

ONESHIM Backoffice v2는 다층 테스트 전략을 통해 품질을 보장합니다. 서버 측 35,549개 테스트 통과를 기반으로, 프론트엔드에서도 체계적인 테스트 피라미드를 구축합니다.

테스트 피라미드​

LevelToolTargetCoverage
UnitVitest + RTLComponents, hooks, stores1,110 tests (103+ files)
ComponentStorybookVisual regression + interaction103 stories + 22 play tests
IntegrationVitest + MSWAPI hooks, page flowsCore flows
E2E (Automated)@playwright/testCritical user journeys100+ tests (26 files)
E2E (Interactive)playwright-cli개발 중 시각적 검증스크린샷 캡처 (154 PNG)

테스트 실행 명령어​

# UI 단위 테스트
pnpm --filter @oneshim/ui test:run        # 895+ tests

# Backoffice 단위 테스트
pnpm --filter @oneshim/backoffice test:run # 215+ tests

# E2E 테스트
npx playwright test                        # 100+ tests

# Storybook 빌드 검증
pnpm --filter @oneshim/ui storybook:build

Unit Test (Vitest + React Testing Library)​

Vitest와 React Testing Library(RTL)를 사용하여 컴포넌트, hooks, stores를 단위 테스트합니다.

  • 컴포넌트 테스트: 렌더링, 사용자 인터랙션, 접근성 검증
  • Hook 테스트: renderHook으로 커스텀 hooks 독립 테스트
  • Store 테스트: Zustand store의 상태 변경 로직 검증
  • 현재 규모: UI 895+ tests + Backoffice 215+ tests = 1,110 tests

Component Test (Storybook)​

모든 UI 컴포넌트를 Storybook으로 문서화하고 시각적 회귀 테스트를 수행합니다.

  • 103개 Stories: 각 컴포넌트의 다양한 상태를 Story로 정의
  • 22개 Play Tests: 인터랙션 기반 자동화 테스트
  • Visual Regression: 스냅샷 비교를 통한 시각적 변경 감지
  • 접근성 검사: a11y addon을 통한 자동 접근성 검증

Integration Test (Vitest + MSW)​

API hooks와 페이지 단위 플로우를 통합 테스트합니다.

  • MSW Mock 서버: 실제 API 응답을 모방하는 서비스 워커
  • API Hook 테스트: TanStack Query hooks의 데이터 로딩, 캐싱, 에러 처리
  • 페이지 플로우 테스트: 사용자 시나리오 기반 통합 테스트

E2E Test (Playwright)​

Automated (@playwright/test)​

주요 사용자 여정(Critical User Journeys)을 자동화된 E2E 테스트로 검증합니다.

  • 100+ 테스트 (26개 파일): 로그인, 대시보드 탐색, 16 도메인 CRUD, 스크린샷 캡처
  • Cross-browser: Chromium, Firefox, WebKit에서 실행
  • CI 통합: GitHub Actions에서 자동 실행

Interactive (playwright-cli)​

코딩 에이전트에 최적화된 브라우저 자동화 CLI 도구입니다.

  • 개발 중 UI 시각적 확인: 실제 브라우저에서 페이지 렌더링 상태 확인
  • 인터랙션 테스트: 클릭, 입력, 네비게이션 등 사용자 동작 시뮬레이션
  • 토큰 효율적: 스냅샷 기반 페이지 분석으로 LLM 토큰 소비 최소화
  • 검증 결과: 10개 페이지 모두 정상 렌더링 확인 (Light/Dark 모드)

GitHub Actions CI/CD​

GitHub Actions 기반 5-job CI/CD 파이프라인으로 모든 PR과 push에 대해 자동 검증을 수행합니다. E2E 테스트 포함.

파이프라인 구조​

5개 Job 상세​

Job의존성역할
lint-ESLint + Biome 코드 린팅
typecheck-TypeScript 타입 검사
unit-testlint, typecheckVitest 단위 테스트 (1,110 tests)
e2e-testlint, typecheckPlaywright E2E 테스트 (100+ tests)
buildunit-test, e2e-testVite 프로덕션 빌드

환경 및 설정​

  • Node.js: 22
  • pnpm: 10.6.5
  • Path filter: oneshim-agent/backoffice/**
  • Artifact uploads: backoffice dist (14일), Storybook dist (14일)

Visual Regression Testing​

@storybook/test-runner + jest-image-snapshot을 사용하여 컴포넌트의 시각적 변경을 자동으로 감지합니다.

  • diff threshold: 0.5% (픽셀 단위 비교)
  • 스냅샷 저장: 기준 이미지와 비교하여 변경 사항 감지
  • CI 통합: Storybook 빌드 후 자동 실행
# Visual regression 테스트 실행
pnpm --filter @oneshim/ui test-storybook

접근성 테스트 (a11y)​

vitest-axe를 통합하여 모든 컴포넌트 테스트에서 WCAG 접근성 위반을 자동으로 검증합니다.

  • 자동 검증: 모든 컴포넌트 테스트 파일에 a11y 위반 검사 포함
  • 헬퍼 함수: expectNoA11yViolations() 유틸리티로 일관된 검증
  • WCAG 준수: axe-core 기반 자동화된 접근성 표준 검증
// 컴포넌트 테스트 예시
import { expectNoA11yViolations } from '@oneshim/test-utils';

it('접근성 위반이 없어야 한다', async () => {
  const { container } = render(<MyComponent />);
  await expectNoA11yViolations(container);
});

MSW Mock 서버 (packages/test-utils)​

packages/test-utils에서 MSW(Mock Service Worker) 기반의 테스트 인프라를 제공합니다.

14개 도메인별 핸들러​

각 API 도메인에 대한 MSW 핸들러를 제공합니다.

test-utils/
├── handlers/
│   ├── dashboard.ts
│   ├── monitoring.ts
│   ├── knowledge.ts
│   ├── ai.ts
│   ├── ontology.ts
│   ├── digital-twin.ts
│   ├── audit.ts
│   ├── workflows.ts
│   ├── users.ts
│   ├── settings.ts
│   ├── auth.ts
│   ├── sessions.ts
│   ├── devices.ts
│   └── notifications.ts
├── fixtures/
│   └── ... (도메인별 fixture 데이터)
└── render.tsx (Custom render with providers)

Fixtures​

테스트에 사용되는 고정 데이터를 제공합니다. 실제 API 응답 형식과 동일한 구조를 유지하여 타입 안전성을 보장합니다.

Custom Render​

React Testing Library의 render를 래핑하여 필요한 Provider(QueryClient, Router, Theme 등)를 자동으로 주입합니다.

// packages/test-utils/render.tsx
import { render } from './custom-render';

// 모든 Provider가 자동으로 주입됨
render(<MyComponent />);