> 웹 프론트엔드 > JS 튜토리얼 > % 코드 적용 범위를 얻는 방법은 무엇입니까? ✅

% 코드 적용 범위를 얻는 방법은 무엇입니까? ✅

DDD
풀어 주다: 2025-01-17 00:30:09
원래의
582명이 탐색했습니다.

100% 코드 커버리지 달성: 실용 가이드

이 문서에서는 프로젝트의 코드 적용 범위를 100% 효율적으로 달성하는 방법을 자세히 설명합니다. 뛰어들어 보세요!

How to get % code coverage? ✅

준비

시작하기 전에 다음 주요 구성 요소를 확인하세요.

  1. 테스트 범위: 테스트할 코드 세그먼트(함수, 모듈 등)를 정의합니다.
  2. 타사 라이브러리: 테스트 라이브러리(예: Mocha)를 선택하세요.
  3. 보고서 형식: 보고서 형식을 선택합니다(예: Codecov의 경우 lcov).

미리 계획하면 테스트 프로세스가 간소화됩니다.

실제 구현

이 예에서는 TypeScript 파일을 사용합니다.

How to get % code coverage? ✅

프로젝트 루트 디렉터리에 test 폴더를 만듭니다. 테스트는 .test.ts 확장자(또는 .spec.ts와 같은 유사)를 가진 파일에 배치됩니다.

How to get % code coverage? ✅

보도 보고에는 Mocha, Sinon 및 c8을 사용합니다.

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>
로그인 후 복사
로그인 후 복사

이 패키지를 설치해야 합니다. 추후 라이브러리가 추가될 예정입니다.

다음 명령은 테스트를 실행하고 보고서를 생성합니다.

<code class="language-json">  "scripts": {
    "test": "mocha --require ts-node/esm --experimental-specifier-resolution=node",
    "test:watch": "mocha --watch --require ts-node/esm --experimental-specifier-resolution=node",
    "coverage": "c8 --reporter=lcov npm run test",
    "coverage:default": "c8 npm run test"
  },</code>
로그인 후 복사

test:watch 명령이 중요합니다. 코드 변경 시 테스트를 자동으로 다시 실행하므로 수동으로 다시 시작할 필요가 없습니다.

How to get % code coverage? ✅

TypeScript 컴파일에는 추가 모듈이 필요합니다.

<code class="language-json">  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }</code>
로그인 후 복사

예: 간단한 함수 테스트

add 기능을 테스트해 보겠습니다.

add.test.ts

<code class="language-typescript">export function add(a: number, b: number): number {
    return a + b;
}</code>
로그인 후 복사

해당 테스트 파일:

add.ts

<code class="language-typescript">import { strict as assert } from 'assert';
import { add } from '../add';

describe('Function add()', () => {
    it('should return 5 when adding 2 and 3', () => {
        const result = add(2, 3);
        assert.equal(result, 5);
    });

    // ... more test cases ...
});</code>
로그인 후 복사

예상 결과와 실제 결과를 비교한 것입니다. 테스트 실패는 문제를 나타냅니다. 철저한 테스트를 통해 코드 수정으로 인해 기존 기능이 중단되지 않는지 확인합니다.

DOM 상호작용 테스트

DOM 조작(예: 클릭 이벤트)을 테스트하려면 jsdomjsdom-global:

을 설치하세요.
<code class="language-json">"devDependencies": {
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2",
}</code>
로그인 후 복사

다음 패키지를 구성하세요.

<code class="language-javascript">require("jsdom-global")();

global.DOMParser = window.DOMParser;</code>
로그인 후 복사

이를 통해 Node.js는 브라우저의 DOM 환경을 시뮬레이션할 수 있습니다.

비동기 작업 테스트

비동기 함수(예: API 호출)의 경우 nocknode-fetch을 사용하세요.

<code class="language-json">"devDependencies": {
    "nock": "^13.5.6",
    "node-fetch": "^2.7.0",
}</code>
로그인 후 복사

다음 패키지를 구성하세요.

<code class="language-javascript">import fetch from "node-fetch";

global.fetch = fetch as any;</code>
로그인 후 복사

nock은 API 응답을 모의하여 예측 가능하고 안정적인 테스트 환경을 제공합니다. node-fetch은 브라우저와 유사한 fetch Node.js 구현을 제공합니다.

Codecov 통합

Codecov와 통합하려면 GitHub 저장소를 만들고 Codecov의 설정 지침을 따르세요. GitHub Actions는 보고서 업로드를 자동화할 수 있습니다. 샘플 GitHub Actions 워크플로:

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>
로그인 후 복사
로그인 후 복사

이 워크플로는 테스트를 실행하고 각 푸시 또는 풀 요청에 대해 Codecov에 적용 범위 보고서를 업로드합니다. 그런 다음 README에 Codecov 배지를 추가할 수 있습니다.

How to get % code coverage? ✅

결론

이러한 단계를 따르고 이를 특정 요구 사항에 맞게 조정하면 100% 테스트 적용 범위를 달성 및 유지하여 코드 품질과 안정성을 향상시킬 수 있습니다. 더 나은 유지 관리를 위해 반복적인 테스트 코드를 재사용 가능한 함수로 리팩터링하는 것을 잊지 마세요.

How to get % code coverage? ✅

위 내용은 % 코드 적용 범위를 얻는 방법은 무엇입니까? ✅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿