Cypress로 프론트엔드 테스트 커버리지 확보하기

API7.ai

March 2, 2021

Technology

배경

"Cypress를 통한 안정적인 제품 배달" 글에서 우리는 Cypress를 E2E 테스트 프레임워크로 선택한 이유에 대해 논의했습니다. 거의 두 달 동안 테스트 케이스를 다듬은 후, 테스트 커버리지가 충분한지 정량화하기 위해 테스트 커버리지가 필요했습니다. 이 글은 Cypress를 사용하여 APISIX Dashboard 프론트엔드 E2E 커버리지를 얻는 방법을 설명합니다.

코드 커버리지란 무엇인가

코드 커버리지는 소프트웨어 테스트에서 프로그램의 소스 코드가 테스트된 비율과 범위를 설명하는 지표이며, 그 결과 비율을 코드 커버리지라고 합니다. 테스트 코드 커버리지는 코드의 건강 상태를 어느 정도 반영합니다.

의존성 설치 및 구성

테스트 커버리지 데이터를 수집하기 위해, Cypress가 데이터를 수집할 수 있도록 원본 비즈니스 코드에 몇 가지 프로브를 삽입해야 합니다.

Cypress는 공식적으로 두 가지 접근 방식을 권장합니다. 첫 번째는 nyc를 통해 임시 디렉토리를 생성하고 프로브가 작성된 코드를 실행하여 테스트 커버리지 데이터를 수집하는 것입니다. 두 번째 방법은 코드 변환 파이프라인을 통해 실시간으로 코드 변환을 수행하는 것으로, 임시 폴더의 번거로움을 없애고 테스트 커버리지 데이터 수집을 상대적으로 간편하게 만듭니다. 우리는 프론트엔드 E2E 커버리지를 수집하기 위해 두 번째 방법을 선택했습니다.

  1. 의존성 설치
yarn add  babel-plugin-istanbul --dev
  1. Cypress 플러그인 설치
yarn add  @cypress/code-coverage --dev
  1. Babel 구성
// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],
  1. Cypress 코드 커버리지 플러그인 구성
// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';
  1. 테스트 커버리지 획득

구성이 완료되면 테스트 케이스를 실행해야 합니다. 테스트 케이스 실행 후, Cypress는 coverage와 .nyc_output 폴더를 생성하며, 이 폴더들에는 테스트 커버리지 보고서가 포함됩니다.

1.png

다음 명령어를 실행한 후 콘솔에 테스트 커버리지 정보가 나타납니다.

npx nyc report --reporter=text-summary

2.png

coverage 디렉토리 아래에는 더 상세한 보고서 페이지가 제공됩니다.

3.png

  • Statements는 각 문장이 실행되었는지 여부를 나타냅니다.
  • Branchs는 각 if 블록이 실행되었는지 여부를 나타냅니다.
  • Functions는 각 함수가 호출되었는지 여부를 나타냅니다.
  • Lines는 각 줄이 실행되었는지 여부를 나타냅니다.

요약

테스트 커버리지 비율은 프로젝트의 품질을 어느 정도 반영합니다. 현재 APISIX Dashboard 프론트엔드 E2E 커버리지 비율은 71.57%에 달합니다. 우리는 커뮤니티와 함께 테스트 커버리지 비율을 높이고 사용자에게 더 안정적이고 신뢰할 수 있는 제품을 제공하기 위해 계속 노력할 것입니다.

Tags:
APISIX Basics
Testing
Plugin