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

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

JavaScript 테스트 코드 작성 요령을 제대로 이해하고 활용하면 코드 품질을 획기적으로 개선할 수 있습니다. 테스트 코드는 단순히 버그를 찾는 도구가 아니라, 코드의 설계를 개선하고 리팩토링을 안전하게 수행할 수 있게 해주는 필수 요소입니다. 특히 프로젝트 규모가 커질수록 테스트 코드의 가치는 더욱 빛을 발합니다. 효과적인 테스트 코드는 개발 생산성을 높이고, 유지보수 비용을 절감하며, 팀 전체의 자신감을 향상시킵니다.

핵심 팁 10가지

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

Arrange-Act-Assert 패턴은 테스트 코드의 가독성을 크게 향상시킵니다. 준비(Arrange) 단계에서 테스트에 필요한 데이터와 환경을 설정하고, 실행(Act) 단계에서 테스트할 함수를 호출하며, 검증(Assert) 단계에서 결과를 확인합니다. 이 패턴을 따르면 테스트의 의도가 명확해지고 다른 개발자들도 쉽게 이해할 수 있습니다.

test('사용자 이름을 올바르게 포맷팅한다', () => {
  // Arrange
  const user = { firstName: '홍', lastName: '길동' };
  
  // Act
  const result = formatUserName(user);
  
  // Assert
  expect(result).toBe('홍길동');
});

2. 테스트 케이스는 하나의 개념만 검증

하나의 테스트에서 여러 가지를 검증하려 하면 테스트가 실패했을 때 원인을 파악하기 어렵습니다. 각 테스트는 단일 책임 원칙을 따라야 하며, 하나의 동작이나 조건만 검증해야 합니다. 이렇게 하면 테스트 실패 시 정확히 어떤 부분에 문제가 있는지 즉시 알 수 있습니다. 여러 시나리오를 테스트해야 한다면 개별 테스트 케이스로 분리하세요.

// 나쁜 예 - 여러 개념 검증
test('계산기 함수들', () => {
  expect(add(1, 2)).toBe(3);
  expect(subtract(5, 3)).toBe(2);
  expect(multiply(2, 3)).toBe(6);
});

// 좋은 예 - 각각 분리
test('덧셈을 올바르게 수행한다', () => {
  expect(add(1, 2)).toBe(3);
});

test('뺄셈을 올바르게 수행한다', () => {
  expect(subtract(5, 3)).toBe(2);
});

3. 의미 있는 테스트 이름 작성

테스트 이름은 테스트가 무엇을 검증하는지 명확하게 설명해야 합니다. “should”, “when”, “given” 같은 키워드를 사용하여 조건과 예상 결과를 표현하세요. 좋은 테스트 이름은 문서 역할을 하며, 테스트가 실패했을 때 즉시 문제를 파악할 수 있게 해줍니다. 한글로 작성하면 더욱 직관적일 수 있습니다.

// 나쁜 예
test('test1', () => { });
test('validation', () => { });

// 좋은 예
test('빈 문자열이 입력되면 에러를 발생시킨다', () => { });
test('유효한 이메일 형식이면 true를 반환한다', () => { });
test('배열이 비어있을 때 null을 반환한다', () => { });

4. 테스트 더블 활용하기

외부 의존성(API, 데이터베이스 등)을 테스트할 때는 Mock, Stub, Spy 같은 테스트 더블을 활용하세요. 이를 통해 테스트를 빠르고 안정적으로 만들 수 있으며, 외부 환경에 영향을 받지 않습니다. Jest의 경우 jest.fn(), jest.mock(), jest.spyOn() 등의 기능을 제공합니다. 테스트 더블을 사용하면 특정 상황을 재현하기도 쉬워집니다.

// API 호출을 Mock으로 대체
test('사용자 데이터를 성공적으로 가져온다', async () => {
  const mockFetch = jest.fn().mockResolvedValue({
    json: async () => ({ name: '홍길동', age: 30 })
  });
  
  global.fetch = mockFetch;
  
  const user = await fetchUser(1);
  
  expect(user.name).toBe('홍길동');
  expect(mockFetch).toHaveBeenCalledWith('/api/users/1');
});

5. 경계값 테스트 작성

버그는 주로 경계값에서 발생합니다. 빈 배열, null, undefined, 0, 음수, 최대값, 최소값 등 극단적인 케이스를 반드시 테스트하세요. JavaScript 테스트 코드 작성 요령 중 가장 중요한 것 중 하나가 바로 엣지 케이스를 놓치지 않는 것입니다. 정상 케이스만 테스트하면 프로덕션에서 예상치 못한 오류가 발생할 수 있습니다.

describe('배열 평균 계산 함수', () => {
  test('정상적인 배열의 평균을 계산한다', () => {
    expect(average([1, 2, 3, 4, 5])).toBe(3);
  });
  
  test('빈 배열일 때 0을 반환한다', () => {
    expect(average([])).toBe(0);
  });
  
  test('음수가 포함된 배열도 처리한다', () => {
    expect(average([-1, -2, 3])).toBe(0);
  });
  
  test('하나의 요소만 있을 때 그 값을 반환한다', () => {
    expect(average([5])).toBe(5);
  });
});

6. 비동기 코드 테스트 패턴

async/await를 활용하면 비동기 코드를 동기 코드처럼 읽기 쉽게 테스트할 수 있습니다. Promise를 반환하는 함수는 반드시 await를 사용하거나 return을 통해 Promise를 반환해야 합니다. 그렇지 않으면 테스트가 비동기 작업이 완료되기 전에 끝나버려 잘못된 결과를 얻을 수 있습니다. 타임아웃 설정도 필요에 따라 조정하세요.

// async/await 패턴
test('비동기 데이터 로딩이 성공한다', async () => {
  const data = await loadData();
  expect(data).toBeDefined();
  expect(data.length).toBeGreaterThan(0);
});

// Promise 반환 패턴
test('Promise를 올바르게 처리한다', () => {
  return fetchData().then(data => {
    expect(data).toEqual({ status: 'success' });
  });
});

// 에러 처리 테스트
test('API 오류 시 에러를 throw한다', async () => {
  await expect(fetchInvalidData()).rejects.toThrow('API Error');
});

7. 테스트 픽스처와 헬퍼 함수 활용

반복적으로 사용되는 테스트 데이터나 설정 코드는 별도의 픽스처나 헬퍼 함수로 분리하세요. beforeEach, afterEach를 활용하여 각 테스트 전후에 필요한 설정과 정리 작업을 수행할 수 있습니다. 이렇게 하면 테스트 코드의 중복을 줄이고 유지보수성을 높일 수 있습니다. 공통 테스트 데이터는 별도 파일로 관리하는 것도 좋은 방법입니다.

// 테스트 픽스처 분리
const createTestUser = (overrides = {}) => ({
  id: 1,
  name: '테스트 유저',
  email: '[email protected]',
  ...overrides
});

describe('UserService', () => {
  let userService;
  
  beforeEach(() => {
    userService = new UserService();
  });
  
  test('사용자를 생성한다', () => {
    const userData = createTestUser({ name: '홍길동' });
    const user = userService.create(userData);
    expect(user.name).toBe('홍길동');
  });
});

8. 커버리지보다 의미 있는 테스트

100% 커버리지가 목표가 되어서는 안 됩니다. 중요한 비즈니스 로직과 복잡한 함수에 집중하세요. 단순한 getter/setter나 프레임워크 코드까지 테스트하는 것은 비효율적입니다. 대신 버그가 발생했을 때 큰 영향을 미치는 핵심 기능, 자주 변경되는 코드, 복잡한 조건문이 있는 부분을 우선적으로 테스트하세요. 테스트의 가치를 항상 고려해야 합니다.

// 중요도가 높은 비즈니스 로직 테스트
describe('주문 총액 계산', () => {
  test('할인과 배송비를 포함한 최종 금액을 계산한다', () => {
    const order = {
      items: [{ price: 10000, quantity: 2 }],
      discountRate: 0.1,
      shippingFee: 3000
    };
    
    const total = calculateOrderTotal(order);
    
    // 20000 * 0.9 + 3000 = 21000
    expect(total).toBe(21000);
  });
});

9. 테스트 격리 원칙 준수

각 테스트는 독립적으로 실행 가능해야 하며, 다른 테스트의 영향을 받지 않아야 합니다. 전역 변수나 공유 상태를 피하고, 각 테스트에서 필요한 데이터를 직접 생성하세요. 테스트 순서가 바뀌어도 결과가 같아야 합니다. 데이터베이스나 파일 시스템을 사용하는 경우 각 테스트 후 정리 작업을 반드시 수행하세요.

describe('ShoppingCart', () => {
  let cart;
  
  // 각 테스트마다 새로운 인스턴스 생성
  beforeEach(() => {
    cart = new ShoppingCart();
  });
  
  test('아이템을 추가한다', () => {
    cart.addItem({ id: 1, name: '상품A' });
    expect(cart.getItemCount()).toBe(1);
  });
  
  test('아이템을 제거한다', () => {
    cart.addItem({ id: 1, name: '상품A' });
    cart.removeItem(1);
    expect(cart.getItemCount()).toBe(0);
  });
});

10. 리팩토링과 함께하는 테스트 작성

테스트 코드 자체도 프로덕션 코드만큼 중요하므로 지속적으로 리팩토링해야 합니다. 중복 제거, 명확한 이름 사용, 적절한 추상화를 통해 테스트 코드의 품질을 유지하세요. 테스트가 복잡해지면 프로덕션 코드의 설계에 문제가 있을 수 있으므로 이를 개선의 신호로 받아들이세요. JavaScript 테스트 코드 작성 요령을 실천하면서 지속적으로 개선해 나가는 것이 중요합니다.

// 테스트 코드 리팩토링 예시
// Before: 중복이 많은 코드
test('관리자는 게시글을 삭제할 수 있다', () => {
  const user = { role: 'admin', id: 1 };
  const post = { id: 100, authorId: 2 };
  expect(canDelete(user, post)).toBe(true);
});

test('작성자는 자신의 게시글을 삭제할 수 있다', () => {
  const user = { role: 'user', id: 1 };
  const post = { id: 100, authorId: 1 };
  expect(canDelete(user, post)).toBe(true);
});

// After: 헬퍼 함수로 개선
const createUser = (role, id = 1) => ({ role, id });
const createPost = (authorId, id = 100) => ({ id, authorId });

test('관리자는 게시글을 삭제할 수 있다', () => {
  expect(canDelete(createUser('admin'), createPost(2))).toBe(true);
});

test('작성자는 자신의 게시글을 삭제할 수 있다', () => {
  expect(canDelete(createUser('user', 1), createPost(1))).toBe(true);
});

실제 적용 사례

한 스타트업 개발팀에서 JavaScript 테스트 코드 작성 요령을 본격적으로 도입한 후 놀라운 변화가 있었습니다. 초기에는 테스트 코드 작성에 시간이 더 걸린다는 우려가 있었지만, 3개월 후 프로덕션 버그가 70% 감소했고, 리팩토링에 대한 두려움이 사라졌습니다. 특히 신규 개발자가 합류했을 때 테스트 코드가 살아있는 문서 역할을 하여 온보딩 시간이 단축되었습니다. 또한 CI/CD 파이프라인에 자동화된 테스트를 통합하여 배포 전 자신감을 얻을 수 있었습니다. 핵심은 완벽한 테스트보다는 점진적으로 개선해 나가는 것이었습니다. TDD를 일부 기능에 시범 적용하면서 팀 전체의 테스트 문화가 자리잡게 되었고, 이제는 테스트 없는 코드는 완성되지 않은 것으로 간주합니다.

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

테스트 코드를 작성할 때 피해야 할 안티패턴들이 있습니다. 구현 세부사항을 과도하게 테스트하면 리팩토링 시 테스트가 깨지기 쉽습니다. 대신 공개 API와 예상 동작에 집중하세요. 또한 테스트를 위해 프로덕션 코드를 변경하는 것은 지양해야 합니다. 테스트가 어렵다면 코드 설계를 개선할 신호입니다. 마지막으로 테스트 실행 속도도 중요합니다. 느린 테스트는 개발자가 자주 실행하지 않게 만들어 테스트의 가치를 떨어뜨립니다.

마무리 및 추가 팁

JavaScript 테스트 코드 작성 요령을 꾸준히 실천하면 더 나은 개발자로 성장할 수 있습니다. 작은 것부터 시작하여 점진적으로 테스트 습관을 기르세요. 팀과 함께 테스트 전략을 논의하고 개선해 나가는 것도 중요합니다.