Blog

JavaScript 테스트 코드 작성, 왜 중요한가?

현대 웹 개발에서 JavaScript 테스트 코드 작성 요령을 제대로 숙지하는 것은 필수입니다. 안정적인 서비스 운영과 빠른 버그 수정, 리팩토링의 안전성을 보장하기 위해서는 체계적인 테스트 코드가 뒷받침되어야 합니다. 많은 개발자들이 테스트 코드 작성을 어려워하거나 시간 낭비로 여기지만, 올바른 접근법을 익히면 오히려 개발 속도가 빨라지고 코드 품질이 크게 향상됩니다. 이 글에서는 실무에서 즉시 활용 가능한 JavaScript 테스트 코드 작성의 핵심 노하우를 소개합니다.

핵심 팁 10가지

1. AAA 패턴으로 테스트 구조화하기

Arrange(준비), Act(실행), Assert(검증)의 3단계로 테스트를 구조화하면 가독성이 크게 향상됩니다. 각 단계를 명확히 구분하여 테스트의 의도를 쉽게 파악할 수 있습니다.

// Good Example
test('사용자 등록이 정상적으로 동작해야 한다', () => {
  // Arrange: 테스트 준비
  const userData = { name: 'John', email: '[email protected]' };
  
  // Act: 실행
  const result = registerUser(userData);
  
  // Assert: 검증
  expect(result.success).toBe(true);
  expect(result.user.name).toBe('John');
});

2. 의미 있는 테스트 이름 작성하기

테스트 이름은 ‘무엇을 테스트하는지’와 ‘예상 결과’를 명확히 담아야 합니다. 실패 시 어떤 기능이 문제인지 즉시 파악할 수 있도록 구체적으로 작성하세요. ‘should’, ‘~해야 한다’ 형식을 사용하면 테스트의 의도가 명확해집니다.

// Bad
test('login', () => { /* ... */ });

// Good
test('유효하지 않은 이메일로 로그인 시도 시 에러를 반환해야 한다', () => {
  const result = login('invalid-email', 'password');
  expect(result.error).toBe('INVALID_EMAIL');
});

3. 하나의 테스트는 하나의 개념만 검증

단일 책임 원칙은 테스트 코드에도 적용됩니다. 한 테스트에서 여러 기능을 검증하면 실패 원인을 파악하기 어렵습니다. 각 테스트는 하나의 특정 시나리오나 엣지 케이스만 다루도록 분리하세요.

// Bad: 여러 개념을 한 테스트에서 검증
test('사용자 관련 기능', () => {
  expect(createUser(data)).toBeDefined();
  expect(deleteUser(id)).toBe(true);
  expect(updateUser(id, data)).toBeTruthy();
});

// Good: 각각 분리
test('사용자 생성 시 객체를 반환해야 한다', () => {
  expect(createUser(data)).toBeDefined();
});

test('사용자 삭제 성공 시 true를 반환해야 한다', () => {
  expect(deleteUser(id)).toBe(true);
});

4. 테스트 격리 및 독립성 유지

각 테스트는 다른 테스트의 영향을 받지 않아야 합니다. beforeEach나 afterEach를 활용해 매 테스트마다 깨끗한 상태를 보장하세요. 전역 변수 사용을 피하고, 각 테스트가 독립적으로 실행 가능해야 합니다.

describe('ShoppingCart', () => {
  let cart;
  
  beforeEach(() => {
    // 각 테스트 전에 새 장바구니 생성
    cart = new ShoppingCart();
  });
  
  test('상품 추가 시 개수가 증가해야 한다', () => {
    cart.addItem('book');
    expect(cart.getItemCount()).toBe(1);
  });
  
  test('빈 장바구니의 총액은 0이어야 한다', () => {
    expect(cart.getTotal()).toBe(0);
  });
});

5. 모킹(Mocking)을 적절히 활용하기

외부 API, 데이터베이스, 파일 시스템 등 외부 의존성은 모킹하여 테스트 속도를 높이고 안정성을 확보하세요. Jest의 jest.mock()이나 Sinon 같은 라이브러리를 활용하면 효과적입니다.

// API 호출을 모킹
jest.mock('./api');
import { fetchUserData } from './api';

test('사용자 데이터 로딩 성공 시 이름을 표시해야 한다', async () => {
  // Arrange
  fetchUserData.mockResolvedValue({ name: 'Alice', age: 30 });
  
  // Act
  const result = await loadUser(123);
  
  // Assert
  expect(result.displayName).toBe('Alice');
  expect(fetchUserData).toHaveBeenCalledWith(123);
});

6. 엣지 케이스와 에러 케이스 테스트

정상 흐름뿐만 아니라 빈 배열, null, undefined, 경계값 등 예외 상황을 반드시 테스트하세요. 실제 버그의 대부분은 엣지 케이스에서 발생합니다. 에러 처리 로직도 철저히 검증해야 합니다.

describe('calculateDiscount', () => {
  test('정상적인 할인 계산', () => {
    expect(calculateDiscount(100, 10)).toBe(90);
  });
  
  test('음수 가격 입력 시 에러를 던져야 한다', () => {
    expect(() => calculateDiscount(-100, 10)).toThrow('가격은 0 이상이어야 합니다');
  });
  
  test('100% 초과 할인율 입력 시 에러를 던져야 한다', () => {
    expect(() => calculateDiscount(100, 150)).toThrow();
  });
  
  test('0원 상품은 할인 후에도 0원이어야 한다', () => {
    expect(calculateDiscount(0, 50)).toBe(0);
  });
});

7. 비동기 코드 테스트 마스터하기

async/await, Promise, 콜백 등 비동기 코드는 테스트 시 특별한 주의가 필요합니다. Jest에서는 async/await을 사용하거나 done 콜백, return Promise 패턴을 활용할 수 있습니다.

// async/await 패턴 (권장)
test('비동기 데이터 fetch 테스트', async () => {
  const data = await fetchData();
  expect(data.status).toBe('success');
});

// Promise 반환 패턴
test('Promise 반환 함수 테스트', () => {
  return fetchData().then(data => {
    expect(data).toBeDefined();
  });
});

// 에러 케이스 테스트
test('API 실패 시 에러를 던져야 한다', async () => {
  await expect(fetchInvalidData()).rejects.toThrow('Network Error');
});

8. 테스트 커버리지를 맹신하지 말기

100% 커버리지가 완벽한 테스트를 의미하지는 않습니다. 중요한 것은 의미 있는 테스트입니다. 핵심 비즈니스 로직, 복잡한 알고리즘, 자주 변경되는 부분에 집중하세요. 커버리지는 참고 지표일 뿐, 목표가 되어서는 안 됩니다.

// 의미 없는 테스트 (커버리지만 높임)
test('getter 테스트', () => {
  const user = { name: 'John' };
  expect(user.name).toBe('John'); // 의미 없음
});

// 의미 있는 테스트 (비즈니스 로직 검증)
test('프리미엄 사용자는 20% 추가 할인을 받아야 한다', () => {
  const user = { type: 'premium' };
  const price = calculatePrice(100, user);
  expect(price).toBe(80);
});

9. describe와 it으로 논리적 그룹화

관련된 테스트들을 describe 블록으로 그룹화하면 구조가 명확해지고 유지보수가 쉬워집니다. 중첩된 describe를 사용해 계층적 구조를 만들 수 있습니다. 각 그룹은 특정 기능이나 컴포넌트 단위로 구성하세요.

describe('UserAuthService', () => {
  describe('login', () => {
    it('올바른 자격증명으로 로그인 성공해야 한다', () => { /* ... */ });
    it('잘못된 비밀번호로 로그인 실패해야 한다', () => { /* ... */ });
    it('존재하지 않는 사용자는 로그인 실패해야 한다', () => { /* ... */ });
  });
  
  describe('logout', () => {
    it('로그아웃 시 세션을 제거해야 한다', () => { /* ... */ });
    it('이미 로그아웃된 상태에서 에러를 던지지 않아야 한다', () => { /* ... */ });
  });
});

10. 테스트 유틸리티 함수 활용하기

반복되는 테스트 설정 코드는 헬퍼 함수로 추출하세요. 테스트 데이터 생성, 공통 설정, 자주 사용하는 assertion 로직 등을 재사용 가능한 유틸리티로 만들면 테스트 코드가 간결해지고 유지보수성이 향상됩니다.

// test-utils.js
export function createMockUser(overrides = {}) {
  return {
    id: 1,
    name: 'Test User',
    email: '[email protected]',
    role: 'user',
    ...overrides
  };
}

export function expectValidationError(fn, field) {
  expect(fn).toThrow();
  try {
    fn();
  } catch (e) {
    expect(e.field).toBe(field);
  }
}

// 테스트에서 사용
import { createMockUser } from './test-utils';

test('관리자 권한 확인', () => {
  const admin = createMockUser({ role: 'admin' });
  expect(hasAdminAccess(admin)).toBe(true);
});

실제 적용 사례

한 스타트업 팀은 JavaScript 테스트 코드 작성 요령을 체계적으로 도입하여 6개월 만에 배포 후 버그 발생률을 70% 줄였습니다. 초기에는 테스트 작성 시간이 추가되어 개발 속도가 느려질 것을 우려했지만, 실제로는 리팩토링 시간이 대폭 단축되고 회귀 버그가 거의 사라져 전체 개발 속도가 40% 향상되었습니다. 특히 결제 모듈처럼 중요한 비즈니스 로직에 AAA 패턴과 엣지 케이스 테스트를 적용하면서 고객 불만이 크게 감소했습니다. 테스트 커버리지는 80% 수준을 유지하되, 핵심 로직에만 집중하는 전략이 효과적이었습니다. 현재는 모든 풀 리퀘스트에 테스트 코드 작성이 필수 요건이 되었고, CI/CD 파이프라인에서 자동으로 테스트가 실행되어 배포 안정성이 크게 높아졌습니다.

주의사항 및 베스트 프랙티스

테스트 코드도 프로덕션 코드만큼 중요하므로 깔끔하게 유지해야 합니다. 중복을 제거하고, 명확한 변수명을 사용하며, 복잡한 로직은 헬퍼 함수로 추출하세요. 테스트가 실패하면 즉시 수정하는 습관을 들이고, 깨진 테스트를 방치하지 마세요. TDD(테스트 주도 개발)를 모든 상황에 강제하기보다는, 복잡한 로직이나 중요한 기능에 선택적으로 적용하는 것이 현실적입니다. 또한 단위 테스트, 통합 테스트, E2E 테스트를 적절히 조합하여 테스트 피라미드 구조를 유지하세요.

마무리

JavaScript 테스트 코드 작성 요령을 익히면 버그 없는 안정적인 코드를 작성할 수 있습니다. 처음에는 번거롭게 느껴질 수 있지만, 장기적으로는 개발 생산성과 코드 품질 향상에 큰 도움이 됩니다. 오늘부터 작은 기능 하나씩 테스트를 작성하며 실천해보세요!