Unit Test | 3.1. 단위 테스트 대상 선정

Kate Jung·2024년 2월 3일

Front-end Test

목록 보기

8/17

📌 단위 테스트 전략

직접 여러 공통 컴포넌트를 구현했다면
반드시 핵심 기능들을 단위 테스트로 검증해야 함.

🔹 단위 테스트에서 검증 하지 않는 경우

🔸 UI만 그리는 컴포넌트(state나 로직처리 없이)

다른 도구(ex. 스토리북)를 통해 검증

모든 컴포넌트, 즉 커버리지 100%를 위한 단위 테스트는 작성 및 유지 보수 비용이 선형적으로 증가할 뿐임.
의미 無
- JS DOM에서 DOM 구조만 확인 → 기능 검증이 아님.
  JS DOM에서는 실제로 DOM을 페인팅하는 것이 아님 → 스타일 or 레이아웃이 제대로 나온지 확인 불가

🔸 간단한 로직 처리만 하는 컴포넌트

상위 컴포넌트의 통합 테스트에서 검증

상태에 따라 컴포넌트들이 조합 되었을 때 어떻게 동작하는지까지 검증되어야 좋은 테스트
- 큰 범위의 통합 테스트로 상태에 따른 동작을 검증하는 게 더 효율적이고 정확한 테스트
  
  내비게이션 바 안에서 어떻게 동작하는지 > 간단한 컴포넌트 (ex. 로그인 버튼, 장바구니 버튼 등)의 단위 테스트를 일일이 작성

🔹 단위 테스트에 대상으로 적합한 것

🔸 React-hook

🔸 공통 유틸 함수

• 다른 모듈과의 의존성 無
• 여러 곳에서 사용되기 때문에 검증을 통해 안정성을 높임

유틸 함수 단위 테스트 예시

pick 함수의 기능

export const pick = (obj, ...propNames) => {
  if (!obj || !propNames) {
    return {};
  }

  return Object.keys(obj).reduce((acc, key) => {
    if (propNames.includes(key)) {
      acc[key] = obj[key];
    }

    return acc;
  }, {});
};

import { pick, debounce } from './common';

describe('pick util 단위테스트', () => {
  it('단일 인자로 전달된 키의 값을 객체에 담아 반환한다', () => {
    const obj = {
      a: 'A',
      b: { c: 'C' },
      d: null,
    };

    expect(pick(obj, 'a')).toEqual({ a: 'A' });
  });

  it('2개 이상의 인자로 전달된 키의 값을 객체에 담아 반환한다', () => {
    const obj = {
      a: 'A',
      b: { c: 'C' },
      d: null,
    };

    expect(pick(obj, 'a', 'b')).toEqual({ a: 'A', b: { c: 'C' } });
  });

  it('대상 객체로 아무 것도 전달 하지 않을 경우 빈 객체가 반환된다', () => {
    expect(pick()).toEqual({});
  });

  it('propNames를 지정하지 않을 경우 빈 객체가 반환된다', () => {
    const obj = {
      a: 'A',
      b: { c: 'C' },
      d: null,
    };

    expect(pick(obj)).toEqual({});
  });
});