Rumah > hujung hadapan web > tutorial js > Apakah Vitest dan mengapa anda perlu menggunakannya?

Apakah Vitest dan mengapa anda perlu menggunakannya?

WBOY
Lepaskan: 2024-08-22 18:53:03
asal
540 orang telah melayarinya

What is Vitest and why you should use it?

Hai, rakan pembangun! ? Adakah anda bersedia untuk menyelami dunia Vitest? Jangan risau jika anda baru mencuba atau jika anda telah menggunakan rangka kerja ujian lain. Kami akan meneroka Vitest bersama-sama, dan menjelang akhir artikel ini, anda akan teruja untuk mencubanya!

Apa itu Vitest?

Vitest adalah seperti adiwira untuk kod anda. Ia adalah rangka kerja ujian unit pantas yang dikuasakan oleh Vite. Tetapi apakah maksudnya untuk anda?

?️ Kelajuan: Vitest adalah sangat pantas, bermakna anda menghabiskan lebih sedikit masa menunggu dan lebih banyak masa pengekodan.
? Penyediaan Mudah: Ia berfungsi di luar kotak dengan Vite, menjadikannya sangat mudah untuk bermula.
? Mod Tontonan: Mod ini boleh menjalankan semula ujian anda secara automatik apabila anda membuat perubahan.
? Pengalaman Pembangun Hebat: Ia mempunyai API yang bersih dan intuitif yang menyeronokkan untuk digunakan.

Jom Mulakan!

Bayangkan anda sedang mengusahakan projek baharu. Anda mempunyai beberapa fungsi dan anda ingin memastikan ia berfungsi dengan betul. Masuk Vitest!

Mula-mula, mari pasang Vitest:

npm install -D vitest
Salin selepas log masuk

Sekarang, katakan kita mempunyai fungsi mudah untuk diuji:

// math.js
export function add(a, b) {
  return a + b;
}
Salin selepas log masuk

Bagaimanakah kami menguji ini dengan Vitest? Ia sangat mudah! Mari buat fail ujian:

// math.test.js
import { expect, test } from 'vitest'
import { add } from './math'

test('addition works', () => {
  expect(add(2, 2)).toBe(4)
})
Salin selepas log masuk

Wah, itu mudah, bukan? Jom pecahkan:

  1. Kami mengimport jangkaan dan ujian daripada Vitest.
  2. Kami mengimport fungsi tambah kami.
  3. Kami mencipta ujian menggunakan fungsi ujian.
  4. Di dalam ujian, kami menggunakan jangkaan untuk menyemak sama ada fungsi kami berfungsi dengan betul.

Menjalankan Ujian Anda

Bersedia untuk menjalankan ujian anda? Cuma tambahkan ini pada pakej anda.json:

{
  "scripts": {
    "test": "vitest"
  }
}
Salin selepas log masuk

Kini anda boleh menjalankan ujian anda dengan:

npm run test
Salin selepas log masuk

Dan voilà! Anda akan melihat keputusan ujian anda terus di terminal anda. ?

Mari Bergaya: Mod Tontonan

Tetapi tunggu, ada lagi! Vitest mempunyai mod jam tangan yang hebat. Ia seperti mempunyai pembantu peribadi yang menyemak kod anda setiap kali anda membuat perubahan.

Untuk menggunakan mod jam tangan, jalankan sahaja:

npm run test -- --watch
Salin selepas log masuk

Kini, setiap kali anda menyimpan fail, Vitest akan menjalankan semula ujian anda secara automatik. Ia seperti sihir! ✨

Masa Soalan!

Jom jadikan ini interaktif. Bolehkah anda meneka apakah ujian ini lakukan?

test('multiply function', () => {
  expect(multiply(3, 4)).toBe(12)
})
Salin selepas log masuk

Luangkan masa untuk memikirkannya...

Bersedia? Ujian ini sedang menyemak fungsi darab untuk memastikan ia mendarab 3 dan 4 dengan betul untuk mendapatkan 12. Sejuk, kan?

Giliran Anda!

Kini giliran anda untuk menulis ujian! Katakan kita mempunyai fungsi ini:

export function isEven(number) {
  return number % 2 === 0
}
Salin selepas log masuk

Bolehkah anda menulis ujian untuk fungsi ini? Cubalah!

(Petunjuk: Anda perlu menyemak kedua-dua nombor genap dan ganjil)

Membungkus

Tahniah! Anda baru sahaja memulakan langkah pertama anda ke dunia Vitest. ? Kami telah membincangkan perkara asas, tetapi banyak lagi yang perlu diterokai:

  • Fungsi dan modul mengejek
  • Menguji kod tak segerak
  • Menggunakan Vitest dengan rangka kerja kegemaran anda seperti React atau Vue

Ingat, ujian bukan sekadar menangkap pepijat. Ini tentang menulis kod yang lebih baik dan lebih dipercayai. Dan dengan Vitest, ia sebenarnya boleh menyeronokkan!

Jadi, adakah anda bersedia untuk mencuba Vitest dalam projek anda yang seterusnya? Percayalah, diri masa depan anda akan terima kasih! ?

Selamat menguji! ?✨

Atas ialah kandungan terperinci Apakah Vitest dan mengapa anda perlu menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
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