jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • 테스팅
  • 테스트 문화
  • End-to-End 테스트
  • 통합 테스트
  • 스냅샷 테스트
  • TDD 마인드셋
  • 유닛테스트 vs 통합테스트 vs E2E 테스트
  1. DEV_NOTE
  2. System Design
  3. 대규모 리엑트 웹앱 개발

테스팅

Previous확장 가능한 웹 아키텍처Next툴링

Last updated 2 months ago

테스팅

소프트웨어가 해야 할 일을 하고 있는지 확인하는 방법

테스트 문화

테스팅은 그저 코드에 관한 것뿐만 아니라 그 자체가 문화라는 것

  • 엔지니어링 아이디어에 테스팅을 구축해야만 한다.

  • 실수할 것임을 이해하라, 그 실수를 막는 방법의 하나가 테스트를 작성하는 것

  • 테스트 작성을 위한 하나의 표준을 마련하고 거기에 모든 사람을 맞추는것이 훨씬 나음

  • 그리고 그것을 문화로 만들어라

    • "이 코드를 위한 테스트는 작성했나요?", "이 코드를 위한 테스트는 왜 없나요?"

, 도구를 사용하면 시간 경과에 따른 코드 커버리지를 모니터링하고 특정 임곗값보다 낮아지면 알람을 보내는 등의 설정이 가능

단위 테스트

앱의 (나머지 코드베이스와 격리된) 개별 컴포넌트 또는 기능 검증에 초점을 둠

정리, 동작, 확인 (arrange, act, assert pattern)

테스트를 명확하고 간결한 형태로 구조화하기 위해 널리 받아들여지는 접근법

End-to-End 테스트

여러 컴포넌트와 서비스에 걸쳐 발생하는 실세계 사용자 상호작용을 시뮬레이션해 완전한 기능을 평가

  • 프론트, 백엔드, 외부 시스템과의 모든 통합을 포함한 모든 시스템이 사용자의 관점에서 기대한 대로 작동함을 보장

  • E2E 테스팅 시나리오에서는 개별 함수나 컴포넌트를 격리한 상태에서 테스트하는 것이 아니라 어떻게 하면 앱 전체를 테스트할 수 있을지 생각해야함

  • 컴포넌트와 API 서비스 사이의 통합 및 전체적인 사용자 경험에 초점을 둬야함

  • 즉, 개별 함수 혹은 컴포넌트의 테스트를 고려하지 않고 전체 앱 흐름 및 다양한 부분들 사이의 상호작용을 검증하는데 초점을 둬야함

  • 핵심 애플리케이션 흐름에 대해서만 작성할것을 권장?

크리티컬 패스가 아닌 경우에는 대부분의 테스트에서 mock API 응답을 사용해야 한다?

통합 테스트

앱의 여러 단위 혹은 컴포넌트 사이의 상호작용을 테스트하는데 초점

  • 컴포넌트 사이의 상호작용을 테스트하고, API 요청 모킹, 앱 흐름의 특정 부분에 초점을 두는 것이 특징

  • 통합테스트는 E2E 테스트의 충분함과 유닛테스트의 효율성의 균형을 제공하는것을 목적으로함

  • 개별 컴포넌트가 함께 잘 작동하고, 전체 앱 컨텍스트 안에서 예상한 대로 기능함을 보장

스냅샷 테스트

컴포넌트의 UI 출력을 캡처하고 이를 미래의 출력과 비교함으로써 의도치않은 변경이 발생하지 않았음을 보장

  • UI 일관성이 중요한 경우

  • 디자인 시스템 혹은 복잡한 시각적 세부 요소를 가진 컴포넌트를 사용하는 경우에 매우 적합

스냅샷 고려사항

  • 스냅샷 테스트는 보조적으로 작성, 기본 테스트 방법이 되서는 안됨

  • 전체 페이지보다 작은 개별 컴포넌트 테스트에 초점을 둬라, 작을수록 쉽게 이해하고 유지보수 가능

  • 가능한 한 각 스냅샷 테스트로 커버하는 테스트 케이스를 문서화, 해당 테스트 목적과 스냅샷 테스트가 어떤 결과/UI를 검증하는지 이해하도록 도움

TDD 마인드셋

코드에 대한 테스트를 먼저 작성하고, 실제 코드를 작성하는 개발 접근법

  • 개선된 코드 품질

    • 이른 시점부터 기대 동작과 결과에 초점을 둘 수 있음

    • 잘 정의된 보다 견고한 코드 구현으로 이어짐

  • 쉬운 디버깅과 유지보수

    • 테스트가 실패했을 때 이미 기대 결과를 알고 있기 때문에 쉽게 이슈를 식별하고 수정 가능

    • 장기적으로 디버깅에 소요되는 수고를 줄임

  • 빠른 개발

    • 특정 시점에 구체적인 기능과 컴포넌트에 초점을 둠으로써 개발자들이 큰 태스크를 작고 관리가능한 덩어리로 나누도록 독려함

    • 생산성을 높이고 기술부채가 발생할 가능성을 줄임

유닛테스트 vs 통합테스트 vs E2E 테스트

올바른 답은 없다.

단, 프로젝트 규모, 복잡성, 팀 전문성 및 가용 리소스 등 다양한 요소에 기반하여 다양한 테스트 전략이 존재

통합 테스트에 더욱 초점을 둘것을 강조

  • 통합테스트는 E2E 테스팅과 관련된 오버헤드를 발생시키지 않으면서도 실세계의 시나리오에서 컴포넌트들이 상호작용하는 방법을 보다 종합적으로 이해할 수 있음

크리티컬 패스(로그인, 회원가입, 결제 등)을 테스트할 때는 반드시 실제 API 요청을 사용하되 너무 많이 사용하지 말라고 권장함

Codecov
Coveralls
Cypress 네트워크 요청 가이드 문서
Write tests, Not too many. Mostly ingegration
https://kentcdodds.com/blog/write-tests
https://web.dev/articles/ta-strategies?hl=ko#test-diamond