Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan % liputan kod? ✅
Mencapai 100% Liputan Kod: Panduan Praktikal
Artikel ini memperincikan cara mencapai 100% liputan kod untuk projek anda dengan cekap. Jom terjun!
Persediaan
Sebelum bermula, kenal pasti komponen utama ini:
Perancangan awal memperkemas proses ujian.
Pelaksanaan Praktikal
Contoh ini menggunakan fail TypeScript:
Buat folder test
dalam direktori akar projek anda. Ujian diletakkan dalam fail dengan sambungan .test.ts
(atau serupa, seperti .spec.ts
).
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.
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.
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.
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan % liputan kod? ✅. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!