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
        • ETC.
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
      • Shadcn UI
    • 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
    • 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
      • User Scenario
      • Optimization
      • Browser API
        • Scrubbing
        • Clipboard
      • Folder Structure
      • API First Design
      • 통합 테스트
      • 테크 스펙
      • 이슈 관리 with Jira
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
    • AI
      • Cursor
    • UI library
      • vanila-extract
      • Headless
      • 테스트 코드
      • 문서화
Powered by GitBook
On this page
  • 단위 테스트 스타일이란?
  • 출력 기반 스타일
  • 상태 기반 스타일
  • 통신 기반 스타일
  • 단위 테스트 스타일 비교
  • 회귀 방지
  • 빠른 피드백
  • 리팩터링 내성
  • 유지 보수성
  • 출력 기반 테스트로 리팩토링 with 함수형 아키텍처
  • 비즈니스 로직과 사이드 이펙트 분리하기
  • 동작 순서
  1. DEV_NOTE
  2. Testing

단위 테스트 스타일

단위 테스트 스타일이란?

출력 기반, 상태 기반, 통신 기반이라는 세 가지 스타일로 테스트를 분류할 수 있다.

하나의 테스트에서 하나 또는 두 세가지 스타일을 모두 함께 사용할 수 있다.

단위 테스트의 두 분파는 선호하는 스타일이 다르다. 고전파 → 통신 기반 스타일 < 상태 기반 스타일 런던파 → 상태 기반 스타일 < 통신 기반 스타일

출력 기반 스타일

output-based testing 테스트 대상에 입력을 넣고 출력된 반환 값을 검증하는 방식

  • 테스트 코드가 간단하고 명확하므로 테스트 품질이 가장 좋은 스타일

  • 전역 상태나 내부 상태를 변경하지 않아 외부 의존성을 다루지 않기 때문에 반환 값만 검증하면 된다.

  • 순수 함수처럼 사이드 이펙트가 없는 코드에만 적용할 수 있다.

  • 기반 코드를 함수형 아키텍처를 지향하게끔 구성하면 출력 기반 스타일의 테스트 코드를 작성할 수 있게 된다.

출력 기반 단위테스트는 함수형이라고도 한다.

사이드 이펙트가 없는 코드를 선호하는 함수형 프로그래밍에 뿌리를 두고 있다.

상태 기반 스타일

state-based testing

작업이 완료 된 후 시스템의 최종 상태를 검증하는 방식

  • 여기서 말하는 상태는 협력자 또는 외부 의존성의 상태 등을 의미한다.

협력자란 SUT(System Under Test, 테스트 대상이 되는 코드)와 상호작용 하는 모듈, 객체, 함수를 등을 가리킨다.

통신 기반 스타일

communication-based testing

목을 사용해 테스트 대상 시스템과 협력자 간의 통신을 검증하는 방식

  • 테스트 대상의 협력자를 목으로 대체하고, 협력자를 올바르게 호출하는지를 검증한다.

단위 테스트 스타일 비교

좋은 단위 테스트의 4대요소를 스타일 별로 비교해보자.

결론부터 말하자면 출력 기반 스타일이 가장 우수하다.

기반 코드를 순수함수로 구성하면, 상태 기반이나 통신 기반의 테스트 스타일을 출력 기반의 테스트로 변경할 수 있게 된다.

좋은 단위 테스트의 4대요소에는 회귀 방지, 리팩터링 내성, 빠른 피드백, 유지 보수성이 있다.

회귀 방지

테스트가 얼마나 버그(회귀)의 존재를 잘 나타내는지에 대한 척도

회귀 방지 지표는 테스트 중에 실행되는 코드량에 따라 달라지는데, 실행되는 코드량은 스타일에 따라 구분되는 것이 아닌 테스트 코드를 어느정도로 테스트할지 상황에 따라 달리지므로 연관이 없다.

빠른 피드백

테스트가 얼마나 빨리 실행되는지에 대한 척도

모든 테스트 스타일은 단위 테스트 기준이므로 테스트 실행속도는 별 차이 없다.

리팩터링 내성

리팩터링 중에 발생하는 거짓 양성 수에 대한 척도

거짓 양성은 코드의 내부 구현사항에 결합된 테스트의 결과이다.

  • 출력 기반 스타일은 테스트 대상 메서드에만 결합되므로 리팩터링 내성에 가장 우수하다.

  • 상태 기반 스타일은 테스트 대상 외에도 다른 협력자의 상태와 함께 작동하므로 구현 세부사항과 결합할 가능성이 커진다.

  • 통신 기반 테스트는 테스트 대역에 상호작용을 확인하는데 이런 테스트는 대부분 깨지기 쉬운 테스트이므로 가장 취약하다.

유지 보수성

테스트가 얼마나 이해하기 어려운지, 테스트가 얼마나 실행하기 어려운지에 대한 척도

  • 출력 기반 스타일은 대부분 짧고 간결하므로 유지 보수성이 용이하다.

  • 상태 기반 스타일은 출력 검증보다 더 많은 데이터를 필요로하고 확인해야하므로 상대적으로 복잡하다.

    • 반복되는 코드를 재사용하기 위한 헬퍼 메서드나, fixtures를 활용하면 완화시킬 수 있다.

  • 통신 기반 스타일은 테스트 대역과 상호작용을 검증해야하므로 테스트 코드가 커지고 복잡해진다.

출력 기반 테스트로 리팩토링 with 함수형 아키텍처

상태 기반 테스트와 통신 기반 테스트를 출력 기반 테스트 스타일로 리팩토링 해보자.

코드 내의 외부 의존성을 목(mock)으로 대체할수 있게 주입받는 형식으로 관심사를 분리 시킨다.

함수형 아키텍처는 사이드 이펙트를 비즈니스 연산 끝으로 몰아서 비즈니스 로직과 사이드 이펙트를 분리한다.

비즈니스 로직과 사이드 이펙트 분리하기

코드를 두 가지 유형으로 나누면, 비즈니스 로직과 부수 효과를 분리하는 것이 더 쉬워진다.

  • 결정을 내리는 코드(함수형 코어) → 사이드 이펙트가 필요 없기에 순수 함수로 구현한다.

  • 해당 결정에 따라 작용하는 코드(가변 쉘) → 순수 함수에 의해 이뤄진 모든 결정을 사이드 이펙트를 적용해 결정을 해석한다.

순수 함수는 테스트 코드가 짧고 간결하며 이해하고 유지보수하기 쉬우므로 테스트하기 쉬운 코드가 된다.

동작 순서

  1. 가변 쉘에서 모든 입력 데이터를 함수형 코어에 공급

  2. 코어에서 결정(값)을 생성하고 반환

  3. 쉘에서 반환받은 결정을 사이드 이펙트로 변환

목표는 함수형 코어 부분을 출력 기반 테스트로 다루는 것

Previous테스트 대역과 식별할 수 있는 동작Next가치 있는 단위 테스트를 위한 리팩토링

Last updated 2 years ago