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

도입 – 테스트 코드의 중요성과 활용도

JavaScript 테스트 코드 작성 요령을 제대로 익히면 버그를 사전에 방지하고, 코드 리팩토링 시 자신감을 가질 수 있으며, 협업 환경에서 코드 품질을 보장할 수 있습니다. 현대 웹 개발에서 테스트는 선택이 아닌 필수입니다. 적절한 테스트 전략과 기법을 활용하면 개발 생산성이 크게 향상되고, 장기적으로 유지보수 비용을 절감할 수 있습니다. 이 글에서는 실무에서 바로 적용 가능한 JavaScript 테스트 코드 작성의 핵심 노하우를 공유합니다.

핵심 팁 10가지

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

Arrange(준비), Act(실행), Assert(검증) 패턴을 사용하면 테스트 코드의 가독성이 크게 향상됩니다. 각 섹션을 명확히 구분하여 테스트의 의도를 쉽게 파악할 수 있습니다.

test('사용자 등록 시 이메일이 저장된다', () => {
  // Arrange
  const user = { email: '[email protected]', name: 'John' };
  const repository = new UserRepository();
  
  // Act
  const result = repository.save(user);
  
  // Assert
  expect(result.email).toBe('[email protected]');
});

2. 명확한 테스트 이름 작성하기

테스트 이름은 “무엇을 테스트하는지”와 “예상 결과”를 명확히 표현해야 합니다. “should”나 “when/then” 형식을 사용하면 테스트의 목적이 분명해집니다. 좋은 테스트 이름은 문서 역할도 수행합니다.

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

// 좋은 예
test('유효하지 않은 비밀번호로 로그인 시도 시 에러를 반환한다', () => { });
test('when user submits empty form, then validation error is shown', () => { });

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

단일 책임 원칙은 테스트 코드에도 적용됩니다. 하나의 테스트에서 여러 기능을 검증하면 실패 원인을 파악하기 어렵습니다. 각 테스트는 독립적이고 명확한 하나의 검증 사항에 집중해야 합니다.

// 나쁜 예 - 여러 개념을 한 번에 테스트
test('사용자 기능', () => {
  expect(user.canLogin()).toBe(true);
  expect(user.hasPermission('admin')).toBe(false);
  expect(user.email).toContain('@');
});

// 좋은 예 - 개념별로 분리
test('활성화된 사용자는 로그인할 수 있다', () => {
  expect(user.canLogin()).toBe(true);
});

test('일반 사용자는 관리자 권한이 없다', () => {
  expect(user.hasPermission('admin')).toBe(false);
});

4. Mock과 Stub을 적절히 활용하기

외부 의존성(API, 데이터베이스)을 Mock이나 Stub으로 대체하면 테스트가 빠르고 안정적으로 실행됩니다. Jest의 jest.fn()이나 jest.mock()을 활용하여 외부 요인에 영향받지 않는 독립적인 단위 테스트를 작성할 수 있습니다.

// API 호출을 Mock으로 대체
const fetchUser = jest.fn();
fetchUser.mockResolvedValue({ id: 1, name: 'John' });

test('사용자 데이터를 올바르게 가져온다', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('John');
  expect(fetchUser).toHaveBeenCalledWith(1);
});

5. 테스트 데이터 빌더 패턴 사용

복잡한 테스트 데이터를 생성할 때 빌더 패턴을 사용하면 코드 재사용성이 높아지고 가독성이 개선됩니다. 테스트마다 필요한 속성만 커스터마이징하면서 기본값을 유지할 수 있어 테스트 코드가 간결해집니다.

class UserBuilder {
  constructor() {
    this.user = {
      id: 1,
      name: 'Test User',
      email: '[email protected]',
      role: 'user'
    };
  }
  
  withEmail(email) {
    this.user.email = email;
    return this;
  }
  
  asAdmin() {
    this.user.role = 'admin';
    return this;
  }
  
  build() {
    return this.user;
  }
}

test('관리자는 대시보드에 접근할 수 있다', () => {
  const admin = new UserBuilder().asAdmin().build();
  expect(canAccessDashboard(admin)).toBe(true);
});

6. 비동기 코드 테스트 올바르게 작성하기

Promise나 async/await를 사용하는 코드를 테스트할 때는 반드시 비동기 처리를 완료해야 합니다. async/await를 사용하거나 done 콜백을 활용하여 비동기 작업이 완료된 후 검증이 이루어지도록 해야 합니다.

// async/await 사용
test('API에서 사용자 목록을 가져온다', async () => {
  const users = await fetchUsers();
  expect(users).toHaveLength(5);
});

// Promise 반환
test('데이터 저장이 성공한다', () => {
  return saveData({ name: 'Test' }).then(result => {
    expect(result.success).toBe(true);
  });
});

// resolves/rejects 매처 사용
test('잘못된 ID로 조회 시 에러가 발생한다', async () => {
  await expect(fetchUser(-1)).rejects.toThrow('Invalid ID');
});

7. 테스트 커버리지보다 중요한 코드에 집중

100% 커버리지가 목표가 아닙니다. 비즈니스 로직, 복잡한 알고리즘, 에러 처리 등 중요한 부분에 테스트를 집중해야 합니다. 단순한 getter/setter보다는 실제 버그가 발생할 가능성이 높은 코드를 우선적으로 테스트하는 것이 효율적입니다.

// 우선순위가 높은 테스트 - 복잡한 비즈니스 로직
test('할인 정책이 올바르게 적용된다', () => {
  const order = new Order({ items: [{ price: 100 }], coupon: 'SAVE20' });
  expect(order.calculateTotal()).toBe(80);
});

// 우선순위가 낮은 테스트 - 단순 getter
test('사용자 이름을 반환한다', () => {
  expect(user.getName()).toBe('John'); // 필요성 재고
});

8. beforeEach와 afterEach로 테스트 격리하기

테스트 간 상태가 공유되면 순서에 따라 결과가 달라지는 문제가 발생합니다. beforeEach와 afterEach를 활용해 각 테스트마다 깨끗한 환경을 제공하여 테스트의 독립성과 신뢰성을 보장해야 합니다.

describe('ShoppingCart', () => {
  let cart;
  
  beforeEach(() => {
    cart = new ShoppingCart();
  });
  
  afterEach(() => {
    cart.clear();
  });
  
  test('상품을 추가할 수 있다', () => {
    cart.addItem({ id: 1, name: 'Book' });
    expect(cart.getItemCount()).toBe(1);
  });
  
  test('장바구니를 비울 수 있다', () => {
    cart.addItem({ id: 1, name: 'Book' });
    cart.clear();
    expect(cart.getItemCount()).toBe(0);
  });
});

9. 에지 케이스와 예외 상황 테스트하기

정상적인 경로뿐만 아니라 경계값, null/undefined, 빈 배열, 예외 상황 등을 테스트해야 견고한 코드를 만들 수 있습니다. JavaScript 테스트 코드 작성 요령 중 가장 간과하기 쉬운 부분이 바로 예외 처리 테스트입니다.

describe('calculateDiscount', () => {
  test('정상 가격에 할인이 적용된다', () => {
    expect(calculateDiscount(100, 10)).toBe(90);
  });
  
  test('0원 상품은 0원을 반환한다', () => {
    expect(calculateDiscount(0, 10)).toBe(0);
  });
  
  test('음수 가격은 에러를 발생시킨다', () => {
    expect(() => calculateDiscount(-100, 10)).toThrow('Invalid price');
  });
  
  test('100% 이상 할인은 0원을 반환한다', () => {
    expect(calculateDiscount(100, 150)).toBe(0);
  });
});

10. 테스트 가능한 코드 설계하기

테스트하기 어려운 코드는 대부분 설계에 문제가 있습니다. 의존성 주입, 순수 함수 활용, 관심사 분리 등의 원칙을 따르면 자연스럽게 테스트 가능한 코드가 됩니다. 테스트 코드 작성이 어렵다면 코드 구조를 개선할 시점입니다.

// 나쁜 예 - 테스트하기 어려움
class OrderService {
  processOrder(orderId) {
    const db = new Database(); // 하드코딩된 의존성
    const order = db.getOrder(orderId);
    // ...
  }
}

// 좋은 예 - 테스트하기 쉬움
class OrderService {
  constructor(database) { // 의존성 주입
    this.database = database;
  }
  
  processOrder(orderId) {
    const order = this.database.getOrder(orderId);
    // ...
  }
}

// 테스트 시 Mock 주입 가능
const mockDb = { getOrder: jest.fn() };
const service = new OrderService(mockDb);

실제 적용 사례

한 스타트업 팀은 JavaScript 테스트 코드 작성 요령을 프로젝트에 적용한 후 배포 후 버그 발생률이 60% 감소했습니다. 특히 결제 모듈에 에지 케이스 테스트를 추가한 후 금액 계산 오류가 완전히 사라졌고, Mock을 활용한 API 테스트로 외부 서비스 장애 상황에서도 안정적으로 개발을 진행할 수 있었습니다. 리팩토링 시에도 기존 테스트가 안전망 역할을 해주어 자신감 있게 코드를 개선할 수 있었습니다. 또한 신규 개발자 온보딩 시 테스트 코드가 훌륭한 문서 역할을 수행하여 학습 속도가 2배 향상되었습니다. CI/CD 파이프라인에 자동화된 테스트를 통합하여 배포 전 자동으로 품질 검증이 이루어지면서 팀 전체의 생산성이 크게 개선되었습니다.

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

테스트 코드도 프로덕션 코드만큼 중요하므로 리팩토링과 유지보수가 필요합니다. 과도한 Mock 사용은 실제 통합 문제를 놓칠 수 있으니 단위 테스트와 통합 테스트를 적절히 병행해야 합니다. 테스트가 실패하면 즉시 수정하는 습관을 들이고, 무시하거나 skip하지 마세요. TDD(Test-Driven Development)를 실천하면 자연스럽게 테스트 가능한 코드가 작성됩니다. 테스트 실행 속도가 느려지면 개발자들이 테스트를 건너뛰게 되므로 빠른 피드백 루프를 유지하는 것이 중요합니다.

마무리 및 추가 팁

JavaScript 테스트 코드 작성 요령을 꾸준히 실천하면 코드 품질과 개발 생산성이 동시에 향상됩니다. Jest, Vitest, Testing Library 등 현대적인 테스트 도구들을 활용하고, 팀 내에서 테스트 문화를 정착시키는 것이 장기적으로 큰 가치를 창출합니다. 작은 것부터 시작해보세요!