Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan % liputan kod? ✅

Bagaimana untuk mendapatkan % liputan kod? ✅

DDD
DDDasal
2025-01-17 00:30:09635semak imbas

Mencapai 100% Liputan Kod: Panduan Praktikal

Artikel ini memperincikan cara mencapai 100% liputan kod untuk projek anda dengan cekap. Jom terjun!

How to get % code coverage? ✅

Persediaan

Sebelum bermula, kenal pasti komponen utama ini:

  1. Skop Ujian: Tentukan segmen kod yang akan diuji (fungsi, modul, dll.).
  2. Perpustakaan Pihak Ketiga: Pilih perpustakaan ujian (cth., Mocha).
  3. Format Laporan: Pilih format laporan (cth., lcov untuk Codecov).

Perancangan awal memperkemas proses ujian.

Pelaksanaan Praktikal

Contoh ini menggunakan fail TypeScript:

How to get % code coverage? ✅

Buat folder test dalam direktori akar projek anda. Ujian diletakkan dalam fail dengan sambungan .test.ts (atau serupa, seperti .spec.ts).

How to get % code coverage? ✅

Kami akan menggunakan Mocha, Sinon dan c8 untuk pelaporan liputan:

<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>

Pakej ini perlu dipasang. Perpustakaan tambahan akan ditambah kemudian.

Arahan berikut menjalankan ujian dan menjana laporan:

<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>

Perintah test:watch adalah penting; ia secara automatik menjalankan semula ujian pada perubahan kod, menghapuskan mula semula manual.

How to get % code coverage? ✅

Kompilasi TypeScript memerlukan modul tambahan:

<code class="language-json">  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }</code>

Contoh: Menguji Fungsi Mudah

Jom uji fungsi add ini:

add.test.ts

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

Fail ujian yang sepadan:

tambah.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>

Ini membandingkan hasil yang dijangka dan sebenar. Ujian yang gagal menunjukkan masalah. Ujian menyeluruh memastikan pengubahsuaian kod tidak memecahkan kefungsian sedia ada.

Menguji Interaksi DOM

Untuk menguji manipulasi DOM (cth., klik acara), pasang jsdom dan jsdom-global:

<code class="language-json">"devDependencies": {
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2",
}</code>

Konfigurasikan pakej ini:

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

global.DOMParser = window.DOMParser;</code>

Ini membolehkan Node.js mensimulasikan persekitaran DOM penyemak imbas.

Menguji Operasi Tak Segerak

Untuk fungsi tak segerak (mis., panggilan API), gunakan nock dan node-fetch:

<code class="language-json">"devDependencies": {
    "nock": "^13.5.6",
    "node-fetch": "^2.7.0",
}</code>

Konfigurasikan pakej ini:

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

global.fetch = fetch as any;</code>

nock mengejek tindak balas API, menyediakan persekitaran ujian yang boleh diramal dan stabil. node-fetch menyediakan pelaksanaan fetch seperti pelayar untuk Node.js.

Integrasi Codecov

Untuk menyepadukan dengan Codecov, buat repositori GitHub dan ikut arahan persediaan Codecov. Tindakan GitHub boleh mengautomasikan muat naik laporan. Contoh aliran kerja Tindakan GitHub:

<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>

Aliran kerja ini menjalankan ujian dan memuat naik laporan liputan ke Codecov pada setiap permintaan tolak atau tarik. Lencana Codecov kemudiannya boleh ditambahkan pada README anda.

How to get % code coverage? ✅

Kesimpulan

Dengan mengikuti langkah ini dan menyesuaikannya dengan keperluan khusus anda, anda boleh mencapai dan mengekalkan liputan ujian 100%, meningkatkan kualiti dan kebolehpercayaan kod. Ingat untuk memfaktorkan semula kod ujian berulang ke dalam fungsi boleh guna semula untuk kebolehselenggaraan yang lebih baik.

How to get % code coverage? ✅

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan % liputan kod? ✅. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn