프론트엔드 테스트

단위 테스트(Unit Test)

• 함수나 메서드와 같은 작은 단위의 코드를 테스트 하는 데 중점을 두는 테스트 유형
  시스템의 전체적인 동작에 중점을 맞추지는 않는다
• 단위테스트의 목적은 코드의 각 단위가 예상대로 작동하고 요구사항을 충족하는지 확인
  ex_카카오 프렌즈샵에서 상품을 구매하는 경우, 단위 테스트는 구매 기능을 테스트할 때 고객의 잔액에서 상품의 금액 만큼 출금하는지, 상품의 재고를 업데이트 하는지, 영수증을 잘 생성하는지 각각 확인한다.

import { render } from '@testing-library/react';
import Item from '../components/Item';

describe('Item', () => {
  it('should render item name and price', () => {
    const { getByText } = render(
      <Item name="Test Item" price={12000} addToCart={() => {}} />
    );
    expect(getByText('Test Item')).toBeInTheDocument();
    expect(getByText('Price: 12000')).toBeInTheDocument();
  });
  
  it('should remove item stock', () => {
  // ... 
  });
  // ...
});

통합 테스트

• 시스템의 여러단위 또는 구성 요소간의 상호작용을 검증하는 테스트 유형
• 서료 다른 단위가 함께 동잗ㄱ하면서 흐름에 맞게 잘 동작하고, 예쌍한 결과를 생성하는지를 테스트한다
  ex_ 카카오 프렌즈 샵에서 상품을 구매하는 경우 통합테스트는 구매시 고객의 잔액, 재고업데이트, 영수증 생성시 다른 구성 요소간의 상호 작용이 잘되어 구매가 완료되는지 확인

E2E 테스트
E2E 테스트는 시스템의 시작부터 끝까지 전체 흐름을 확인하는 테스트 유형이다.
시스템이 예상대로 작동하고 사용자의 요구 사항을 충족하는지 확인하기 위해 모든 구성 요소와 해당 구성 요소의 상호 작용을 테스트하는 것이 포함된다.
예: 카카오 프렌즈샵에서 상품을 구매하는 경우

고객이 카카오 로그인
상품을 선택하여 장바구니에 추가
상품 구매
결제 방식 선택
구매 완료
구매 영수증을 고객 메일로 전송
위의 예시처럼 사용자의 입장에서 전체 Flow가 정상적으로 동작을 하는지 확인한다.