JavaScript 테스트 코드 작성 요령 – 개발자가 꼭 알아야 할 핵심 팁

도입 – 테스트 코드 작성의 중요성

JavaScript 테스트 코드 작성 요령은 현대 웹 개발에서 필수적인 기술입니다. 안정적인 소프트웨어를 만들기 위해서는 체계적인 테스트 전략이 필요하며, 올바른 테스트 코드는 버그를 조기에 발견하고 리팩토링을 안전하게 수행할 수 있게 합니다. 이 글에서는 실무에서 바로 활용할 수 있는 JavaScript 테스트 코드 작성 요령을 상세히 소개하여, 코드 품질과 개발 생산성을 동시에 향상시킬 수 있는 방법을 제시합니다.

핵심 팁 10가지

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

테스트 코드는 Arrange(준비), Act(실행), Assert(검증)의 세 단계로 명확하게 구분해야 합니다. 이 패턴을 따르면 테스트의 의도가 명확해지고 유지보수가 쉬워집니다. 각 단계를 주석이나 빈 줄로 구분하여 가독성을 높이세요.

test('사용자 정보를 올바르게 포맷팅한다', () => {
  // Arrange
  const user = { firstName: 'John', lastName: 'Doe' };
  
  // Act
  const result = formatUserName(user);
  
  // Assert
  expect(result).toBe('John Doe');
});

2. 테스트 케이스 이름을 명확하게 작성하기

테스트 이름은 ‘무엇을 테스트하는지’와 ‘예상 결과’를 명확히 표현해야 합니다. ‘~해야 한다’ 형식보다는 실제 동작을 서술하는 방식이 더 효과적입니다. 길더라도 명확성을 우선시하며, 테스트 실패 시 어떤 기능이 문제인지 즉시 파악할 수 있도록 작성하세요.

// 나쁜 예
test('로그인 테스트', () => {});

// 좋은 예
test('유효하지 않은 이메일로 로그인 시 에러 메시지를 반환한다', () => {});

3. 테스트 격리 원칙 준수하기

각 테스트는 독립적으로 실행되어야 하며 다른 테스트에 영향을 주거나 받아서는 안 됩니다. beforeEach와 afterEach를 활용하여 매 테스트마다 깨끗한 상태를 유지하세요. 전역 변수나 공유 상태를 피하고, 필요한 경우 모킹이나 스텁을 사용하여 외부 의존성을 제거합니다.

describe('ShoppingCart', () => {
  let cart;
  
  beforeEach(() => {
    cart = new ShoppingCart();
  });
  
  test('상품 추가 시 총 가격이 업데이트된다', () => {
    cart.addItem({ name: '노트북', price: 1000000 });
    expect(cart.getTotalPrice()).toBe(1000000);
  });
});

4. 경계값 테스트 작성하기

일반적인 케이스뿐만 아니라 경계값과 예외 상황을 테스트해야 합니다. 빈 배열, null, undefined, 0, 음수, 매우 큰 수 등 극단적인 입력값에 대한 테스트를 포함하세요. 이러한 엣지 케이스 테스트가 실제 운영 환경에서 발생하는 대부분의 버그를 예방합니다.

describe('calculateDiscount', () => {
  test('가격이 0일 때 0을 반환한다', () => {
    expect(calculateDiscount(0, 10)).toBe(0);
  });
  
  test('할인율이 100%일 때 0을 반환한다', () => {
    expect(calculateDiscount(1000, 100)).toBe(0);
  });
  
  test('음수 가격에 대해 에러를 발생시킨다', () => {
    expect(() => calculateDiscount(-100, 10)).toThrow();
  });
});

5. 모킹과 스텁을 적절히 활용하기

외부 API 호출, 데이터베이스 접근, 시간 의존적 코드 등은 모킹하여 테스트의 속도와 안정성을 확보하세요. Jest의 jest.fn(), jest.mock(), jest.spyOn() 등을 활용하면 효과적입니다. 다만 과도한 모킹은 실제 동작과 괴리를 만들 수 있으므로 필요한 부분만 모킹합니다.

import { fetchUserData } from './api';

jest.mock('./api');

test('사용자 데이터를 가져와서 표시한다', async () => {
  const mockUser = { id: 1, name: 'Alice' };
  fetchUserData.mockResolvedValue(mockUser);
  
  const result = await getUserProfile(1);
  
  expect(result.name).toBe('Alice');
  expect(fetchUserData).toHaveBeenCalledWith(1);
});

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

async/await을 사용하여 비동기 테스트를 명확하게 작성하세요. Promise 체이닝보다 async/await이 가독성이 좋고 에러 처리가 쉽습니다. 비동기 작업이 완료될 때까지 기다리지 않으면 테스트가 실패하거나 거짓 양성 결과를 낳을 수 있으므로 주의하세요.

test('API에서 사용자 목록을 가져온다', async () => {
  const users = await fetchUsers();
  
  expect(users).toHaveLength(3);
  expect(users[0]).toHaveProperty('email');
});

test('네트워크 오류 시 에러를 던진다', async () => {
  await expect(fetchUsers()).rejects.toThrow('Network Error');
});

7. 테스트 커버리지 목표 설정하기

100% 커버리지가 항상 목표는 아니지만, 핵심 비즈니스 로직은 반드시 테스트해야 합니다. Jest의 –coverage 옵션으로 커버리지를 측정하고, 중요한 함수와 분기문이 테스트되는지 확인하세요. 커버리지 80% 이상을 목표로 하되, 숫자보다는 의미 있는 테스트 작성에 집중합니다.

// package.json
{
  "scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage --coverageThreshold='{\"global\":{\"branches\":80,\"functions\":80,\"lines\":80}}'"
  }
}

8. 테스트 더블 패턴 이해하기

Dummy, Stub, Spy, Mock, Fake의 차이를 이해하고 상황에 맞게 사용하세요. Stub은 미리 정의된 응답을 반환하고, Spy는 호출 정보를 기록하며, Mock은 예상 동작을 검증합니다. 각 패턴의 목적을 이해하면 더 효과적인 테스트를 작성할 수 있습니다.

// Spy 사용 예시
test('이벤트 핸들러가 호출된다', () => {
  const handler = jest.fn();
  const button = new Button(handler);
  
  button.click();
  
  expect(handler).toHaveBeenCalledTimes(1);
  expect(handler).toHaveBeenCalledWith({ type: 'click' });
});

9. 파라미터화된 테스트 활용하기

유사한 로직을 여러 입력값으로 테스트할 때는 test.each를 사용하여 중복을 제거하세요. 테스트 케이스를 배열로 정의하면 코드량이 줄고 새로운 케이스 추가가 쉬워집니다. 테이블 형식으로 작성하면 가독성도 향상됩니다.

test.each([
  [1, 1, 2],
  [2, 3, 5],
  [10, -5, 5],
  [0, 0, 0]
])('add(%i, %i)는 %i를 반환한다', (a, b, expected) => {
  expect(add(a, b)).toBe(expected);
});

test.each`
  input    | expected
  ${''}    | ${false}
  ${'a'}   | ${true}
  ${'abc'} | ${true}
`('isValidString($input)는 $expected를 반환한다', ({ input, expected }) => {
  expect(isValidString(input)).toBe(expected);
});

10. TDD 사이클 실천하기

Red-Green-Refactor 사이클을 따라 개발하면 테스트 가능한 코드 설계가 자연스럽게 이루어집니다. 먼저 실패하는 테스트를 작성하고, 테스트를 통과시키는 최소한의 코드를 구현한 후, 리팩토링으로 코드를 개선하세요. 이 과정을 반복하면 견고하고 유지보수하기 쉬운 코드가 만들어집니다.

// 1. Red: 실패하는 테스트 작성
test('사용자 나이가 성인인지 확인한다', () => {
  expect(isAdult(20)).toBe(true);
  expect(isAdult(17)).toBe(false);
});

// 2. Green: 테스트를 통과하는 코드 작성
function isAdult(age) {
  return age >= 18;
}

// 3. Refactor: 코드 개선
function isAdult(age) {
  if (typeof age !== 'number' || age < 0) {
    throw new Error('유효하지 않은 나이입니다');
  }
  return age >= 18;
}

실제 적용 사례

한 스타트업 개발팀은 JavaScript 테스트 코드 작성 요령을 도입한 후 배포 전 버그 발견율이 60% 증가했습니다. 특히 결제 모듈에 경계값 테스트를 적용하여 0원 결제, 음수 금액 등 예외 상황을 사전에 차단했습니다. TDD를 실천하면서 코드 리뷰 시간이 30% 단축되었고, 리팩토링에 대한 두려움이 사라져 기술 부채 해소 속도가 빨라졌습니다. 또한 테스트 커버리지를 85% 이상 유지하면서도 테스트 실행 시간을 모킹 전략으로 3분 이내로 단축했습니다. 신규 개발자 온보딩 시 테스트 코드가 실행 가능한 문서 역할을 하여 학습 곡선이 완만해졌고, 자신감 있게 코드를 수정할 수 있게 되었습니다.

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

테스트 코드도 프로덕션 코드만큼 중요하므로 리팩토링과 리뷰 대상에 포함시키세요. 구현 세부사항이 아닌 공개 인터페이스를 테스트하여 리팩토링에 유연하게 대응하고, 테스트가 너무 느리면 개발자가 실행을 꺼리므로 빠른 실행 속도를 유지해야 합니다. 플레이키 테스트(간헐적 실패)는 즉시 수정하며, 테스트를 문서로 활용하여 새로운 팀원이 코드를 이해하는 데 도움을 주세요.

마무리 및 추가 팁

지금 소개한 JavaScript 테스트 코드 작성 요령을 하나씩 적용해보세요. 작은 것부터 시작하여 점진적으로 개선하면 곧 탄탄한 테스트 문화를 구축할 수 있습니다. 지속적인 학습과 실천이 핵심입니다!