React Testing Tutorial (2) - Code Coverage

1. Code Coverage

• 테스트가 얼마나 코드베이스를 덮고 있는지 측정한다.
• 코드 적용 범위는 테스트된 소프트 웨어 코드의 양을 이해하는데 도움이 되는 측정 기준이다.
• 테스트의 품질을 평가하는 데 도움이 되는 매우 유용한 측정 기준이다.

Coverage의 종류

Statement coverage (명령문 커버리지)

• 명령문 커버리지는 코드의 각 명령문이 최소한 한 번은 실행되었는지를 확인한다.
• 코드의 모든 명령문이 실행되었는지 확인하여, 테스트가 충분히 이루어졌는지 확인한다.
• 아래의 예시에서는 2번 실행되었는지 여부를 체크할 수 있다.

function add(a,b) {
    let sum = a + b // 명령문 1
    return sum;  // 명령문 2
} 

Branches coverage (브랜치 커버리지)

• 코드 내의 모든 조건문의 모든 분기가 실행되었는 지를 확인한다.
• 예를 들어 if, else, switch 등의 모든 가능한 경로가 테스트되었는지를 확인한다.
• 브랜치 커버리지는 if문의 true와 fasle 분기가 모두 실행되었는지 확인한다.

function isEven(numn){
    if(num % 2 === 0){ // 브랜치 1
        return true;
    }else{ // 브랜치 2
        return false;
    }
}

Function coverage (함수 커버리지)

• 코드 내의 모든 함수가 최소한 한 번은 호출되었는지를 확인한다.
• 즉, 테스트가 코드의 모든 함수를 호출했는지 평가한다.

function multiply(a, b) { // 함수 1 
    return a * b; 
} 
function divide(a, b) { // 함수 2 
    if (b !== 0) { 
        return a / b; 
    } else { 
        throw new Error("Division by zero"); 
    } 
}

Line coverage (라인 커버리지)

• 코드의 각 라인이 최소한 한 번은 실행되었는지를 확인한다.
• 코드의 정확성과 품질을 평가하는데 좋은 지표가 된다.

function calculateTotal(price, tax) {
    let total = price + tax; // 라인 1
    if (total > 100) { // 라인 2
        return total - 10; // 라인 3
    }
    return total; // 라인 4
}

2. Coverage 사용하기

coverage를 사용하기 위해서 --coverage 옵션을 추가하여 사용할 수 있다.
기존에 프로젝트에서 test라는 스크립트를 이용해서 테스트를 하고 있었고, coverage용 스크립트를 추가로 작성해 준다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "coverage": "react-scripts test --coverage" // test와 동일한 스크립트에 --coverage를 추가한다.
},

이렇게 작성하고 나면 npm run coverage를 이용해서 coverage 기능을 사용할 수 있게 된다.

실행해 보면 아래와 같은 결과가 나온다. 위에서 설명했던 커버리지를 종류별로 볼 수 있게 된다.
![[jest-4.png]]

 

 

퍼센티지가 높을수록 많은 코드를 테스트했다는 의미이다.

coverage에 --watchAll 옵션을 추가해서 사용하게 되면 파일이 변경될 때 자동으로 실행하는 것뿐 아니라 조금 더 자세한 결과를 볼 수 있다.

 

 

포함할 폴더 지정하기

jest coverage를 이용할 때 coverage에 감지되는 디렉터리를 지정할 수 있다.
이 또한, Script를 이용할 수 있다.

--collectCoverageFrom

collectCoverageFrom 옵션을 이용해서 코드 커버리지 수집 시 어떠한 파일을 포함할지를 지정할 수 있다.
특정 파일이나 디렉터리만 커버리지 리포트에 포함할 수 있다.

{
  "scripts": {
    "test": "react-scripts test",
    "coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/component/**/*.{ts,tsx}'"
  },
}

위의 스크립트를 통해서 src/component 안에 있는 ts, tsx 파일만 리포트에 포함시키도록 지정할 수 있다.

 

 

 

제외하고 싶은 파일 패턴

 "coverage" : "react-scripts test --coverage --watchAll --collectCoverageFrom='src/component/**/*.{ts,tsx}' --collectCoverageFrom='!src/component/**/*.{types, stories, constants,test,spec}.{ts,tsx}'"

collectCoverageFrom 옵션의 경우 연속해서 쓸 수 있다.
위의 예시는 ts, tsx 파일 앞에 types, stories, contants, test, spec 이 붙은 파일을 리포트에서 제외하겠다는 의미로 사용할 수 있다.

목표 설정하기

테스트를 진행하면서 해당 테스트의 코드 커버리지의 목표치를 coveragethreshold를 이용하여 설정할 수 있다.

이 옵션을 이용하여 각 커버리지에 대한 최소한의 커버리지 비율을 지정할 수 있고, 설정한 목표치에 충족하지 않으면 테스트가 실패한다. 목표를 설정하여 코드 품질을 유지하고 테스트 커버리지를 높일 수 있다.

coverageThreshold 사용하기

사용하는 방법은 package.json에 jest 필드를 이용하여 설정할 수 있다.

{
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 90,
        "lines": 90,
        "statements": 90
      },
      "./src/componentA.js": { 
          "branches": 70, 
          "functions": 80, 
          "lines": 85, 
          "statements": 85
       }
    }
  }
}

이 예시는 전역적으로 설정하는 것과 특정 파일에 대한 설정을 볼 수 있다.

설정된 커버리지 목표를 충족하지 못하면 테스트가 실패한다.