React 애플리케이션 테스트 코드베이스 계측

소개

이전 기사에서는 Cypress를 놀라운 버전 10으로 업데이트하는 방법을 살펴보았습니다. 이제 응용 프로그램에 코드 적용 범위를 추가하고 이를 CI에 통합하여 이 시리즈를 마무리하겠습니다. 그러나 코드 커버리지란 무엇입니까?

Code coverage is a software testing metric that determines the number of lines of code that is successfully validated under a test procedure, which in turn, helps in analyzing how comprehensively a software is verified. Source

대부분의 경우 이것은 코드베이스가 테스트에 의해 커버되는 정도의 백분율입니다. 테스트가 특정 양의 코드를 다루는지 어떻게 알 수 있습니까? 코드 계측은 테스트 범위를 모니터링 및 추적하고 정확한 보고서를 제공합니다.

시원한! 먼저 애플리케이션이 수행하는 작업을 살펴보겠습니다. 버튼을 클릭하면 서비스에서 게시물을 가져와 페이지에 표시합니다.



참고로 저장소here를 찾을 수 있습니다.

codecov 설치

우리는 Codecov을 사용할 것입니다

Ship healthier code faster with less risk.

그것이 그들의 좌우명입니다! 하지만 어떻게 사용할까요? 위 링크에서 계정을 만들고 저장소를 연결하십시오.



Not yet setup 탭에서 저장소를 찾아야 합니다.



그러면 리포지토리로 코드 적용 범위를 설정하는 방법에 대한 간단한 지침이 제공됩니다. 먼저 필요한 Cypress 패키지를 설치해 보겠습니다.

npm install @cypress/code-coverage --save-dev

그런 다음 cypress/support/e2e.js 파일에서 이 새 코드를 가져오겠습니다.

cypress.config.js에서 코드 커버리지를 올바르게 실행하기 위해 이벤트도 설정해야 합니다.

const { defineConfig } = require('cypress');

module.exports = defineConfig({
    e2e: {
        baseUrl: 'http://localhost:3000',
        specPattern: 'cypress/integration/**/*.spec.js',
        setupNodeEvents(on, config) {
            require('@cypress/code-coverage/task')(on, config);
            return config;
        },
    },
});

테스트를 실행하기 위해 응용 프로그램과 cypress를 열어 보겠습니다.

npm run dev 

npm run test-e2e

테스트를 실행하면 다음 명령이 표시됩니다.



우리가 놓치고 있는 것은 우리 코드의 계측입니다. 이에 대해 몇 가지 방법이 있습니다. 그러나 먼저 두 개의 새 폴더를 .gitignore에 추가해 보겠습니다.

# Code coverage files 
coverage 
.nyc_output

코드를 계측하려면 다음 플러그인을 설치해야 합니다.

npm install vite-plugin-istanbul --save-dev

vite.config.js에서 새로 설치된 라이브러리를 가져와서 설정해야 합니다.

이스탄불 플러그인 작동 방식에 대한 몇 가지 흥미로운 정보를 찾을 수 있습니다here.

마지막으로 나머지를 실행하면 이전과 같은 경고가 더 이상 표시되지 않습니다.



무슨 일이 일어나고 있는지 더 잘 이해하기 위해 루트 디렉토리를 살펴보겠습니다. 커버리지 폴더가 표시됩니다.



이전에 vite.config.js(./src)에서 제공한 디렉토리의 파일에서 다루는 내용을 정확히 설명하는 일부 JSON 파일을 볼 수 있습니다.

마무리

우리의 코드 기반을 계측하는 것은 우리가 실제로 가지고 있는 코드 적용 범위의 백분율을 제공하는 데 필요한 정보를 Codecov에 제공하는 데 중요합니다.

다음 기사에서는 푸시할 때마다 코드 커버리지 보고서를 CodeCov에 자동으로 보내도록 GitHub Action을 설정하는 방법을 살펴보겠습니다. 이렇게 하면 그것에 대해 전혀 생각할 필요가 없습니다!

전체 코드는 여기repo에서 찾을 수 있습니다.

연결하자

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.