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

Bagaimana untuk mendapatkan % liputan kod? ✅

DDD
Lepaskan: 2025-01-17 00:30:09
asal
632 orang telah melayarinya

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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

Konfigurasikan pakej ini:

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

global.DOMParser = window.DOMParser;</code>
Salin selepas log masuk

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>
Salin selepas log masuk

Konfigurasikan pakej ini:

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

global.fetch = fetch as any;</code>
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan