HHyo814
발행일

[ZBF] 7주차 보충 : 테스트 코드 종류 알아보기

기술노트테스트

[ZBF] 7주차 보충 : 테스트 코드 종류 알아보기

이 글은 네이버 블로그에 2024년 1월 17일에 올렸던 것을 그대로 옮겨온 것입니다.

프론트엔드 개발에서 테스트 코드는 애플리케이션의 다양한 부분을 자동으로 검사하여 버그를 찾고, 기능이 예상대로 작동하는지 확인하는 데 중요합니다. 프론트엔드 테스트 코드는 주로 다음과 같은 종류로 나뉩니다:

  • 유닛 테스트(Unit Tests): 가장 작은 코드 단위(예: 함수, 메소드)를 개별적으로 테스트합니다. 유닛 테스트는 각 부분이 정확하게 작동하는지 확인하기 위해 사용됩니다. 주요 도구로는 Jest, Mocha, Jasmine 등이 있습니다.

  • 통합 테스트(Integration Tests): 여러 유닛들이 함께 작동할 때의 동작을 테스트합니다. 통합 테스트는 서로 다른 코드 부분 간의 인터페이스와 상호작용을 검증합니다. Jest, Karma, TestCafe 등이 사용됩니다.

  • 기능 테스트(Functional Tests): 사용자의 관점에서 애플리케이션의 특정 기능을 테스트합니다. 기능 테스트는 사용자의 상호작용을 모방하여 애플리케이션이 예상대로 작동하는지 확인합니다. Cypress, Protractor 등이 있습니다.

  • UI 테스트(User Interface Tests): 애플리케이션의 사용자 인터페이스를 테스트합니다. UI 테스트는 시각적 요소와 사용자 경험이 기대대로 동작하는지 검사합니다. Cypress, Selenium, Puppeteer가 대표적입니다.

  • E2E(End-to-End) 테스트: 사용자가 실제로 애플리케이션을 사용하는 것처럼 전체 흐름을 테스트합니다. E2E 테스트는 애플리케이션이 전체적으로 올바르게 작동하는지 확인합니다. Cypress, Selenium, TestCafe 등이 사용됩니다.

  • 스냅샷 테스트(Snapshot Tests): UI 컴포넌트의 렌더링 결과를 스냅샷으로 저장하고, 이후의 테스트에서 이 스냅샷과 비교합니다. 이는 UI의 변화를 감지하는 데 유용합니다. Jest가 주로 사용됩니다.

  • 성능 테스트(Performance Tests): 애플리케이션이 성능 기준을 충족하는지 확인합니다. 로딩 시간, 반응 속도 등이 검사될 수 있습니다. Lighthouse, WebPageTest, Jest 플러그인이 사용됩니다.

  • 정적 분석(Static Analysis): 코드를 실행하지 않고 분석하여 오류, 버그, 스타일 문제 등을 찾습니다. 이는 일반적으로 린트 도구(Linting Tools)를 사용하여 수행됩니다. ESLint, TSLint가 대표적입니다.

프론트엔드 개발에서 이러한 테스트들은 코드의 품질을 보장하고, 사용자에게 버그 없는 안정적인 경험을 제공하는 데 중요한 역할을 합니다.

프론트엔드 테스트 도구

유닛 테스트(Unit Tests)

Jest: 가장 널리 사용되는 JavaScript 테스트 프레임워크로, 주로 React 애플리케이션에서 유닛 테스트에 사용됩니다.

Mocha: 유연하고 확장 가능한 테스트 프레임워크.

Jasmine: 행동 주도 개발(BDD)을 위한 테스트 프레임워크.

통합 테스트(Integration Tests)

Jest: 모의(Mock)와 스파이(Spy)를 통해 통합 테스트도 지원.

Karma: Angular와 함께 자주 사용되며, 다양한 브라우저에서 테스트를 실행.

TestCafe: E2E 테스트와 함께 통합 테스트도 지원.

기능 테스트(Functional Tests)

Cypress: 현대적인 E2E 테스트 도구로, 기능 테스트에 적합.

Protractor: Angular 애플리케이션을 위한 E2E 테스트 프레임워크.

UI 테스트(User Interface Tests)

Cypress: UI 테스트에도 적합.

Selenium: 브라우저 자동화를 통해 UI 테스트를 수행.

Puppeteer: Chrome 브라우저를 제어하여 UI 테스트 수행.

E2E(End-to-End) 테스트

Cypress: 설치와 사용이 간편하고 강력한 E2E 테스트 도구.

Selenium: 다양한 브라우저와 플랫폼에서의 테스트를 지원.

TestCafe: 설정이 간편하고 강력한 E2E 테스트 도구.

스냅샷 테스트(Snapshot Tests)

Jest: React 컴포넌트의 스냅샷 테스트를 지원.

성능 테스트(Performance Tests)

Lighthouse: 웹 애플리케이션의 성능을 측정하고 개선 제안을 제공.

WebPageTest: 웹 페이지의 성능을 상세하게 분석.

Jest: 일부 성능 측정을 위한 플러그인을 제공.

정적 분석(Static Analysis)

ESLint: JavaScript 코드를 린팅하고 스타일 문제를 발견.

TSLint: TypeScript 코드를 린팅.

TDD는 코드를 작성하기 전에 테스트를 먼저 작성하고, 이를 통해 코드의 품질을 높이는 방법론입니다. 이 과정은 다음과 같이 진행되었습니다:

  1. 테스트 작성: 기능을 구현하기 전에 해당 기능을 검증할 테스트 코드를 먼저 작성합니다. 예를 들어, 사용자 로그인 기능을 구현하기 전에 로그인 성공 및 실패에 대한 테스트를 작성합니다.
  2. 코드 작성: 테스트를 통과하기 위해 최소한의 코드를 작성합니다. 이 단계에서는 테스트를 통과하는 것에만 집중합니다.
  3. 리팩토링: 테스트를 통과한 후, 코드를 정리하고 최적화합니다. 이 과정에서도 테스트를 계속 실행하여 코드의 기능이 유지되는지 확인합니다.

이 접근법을 통해, 저는 이전 프로젝트에서 사용자 인증 시스템을 구축했습니다. Jest를 사용해 유닛 테스트와 기능 테스트를 작성하고, 이를 통해 코드의 결함을 초기 단계에서 발견하고 수정할 수 있었습니다. TDD를 통해 얻은 주요 이점은 다음과 같습니다:

  1. 코드 품질 향상: 테스트를 먼저 작성함으로써, 코드를 작성하는 동안 요구 사항을 명확히 이해하고, 코드의 결함을 사전에 방지할 수 있었습니다.
  2. 리팩토링 용이성: 테스트 코드가 존재하기 때문에, 리팩토링을 할 때 코드의 기능이 유지되는지 쉽게 검증할 수 있었습니다.
  3. 개발 속도 향상: 초기에는 테스트 작성에 시간이 걸리지만, 장기적으로는 버그를 줄이고, 코드 수정 시에도 안정성을 확보할 수 있어 개발 속도가 향상되었습니다.
← 글 목록으로