Konfigurasikan Vitest, MSW dan Penulis Drama dalam projek React dengan Vite dan TS - Bahagian 3

Penulis drama ialah alat ujian hujung-ke-hujung rangka kerja-agnostik (juga dikenali sebagai E2E atau ujian integrasi) untuk apl web. Penulis drama mempunyai pengalaman pembangun yang hebat dan menjadikan penulisan yang baik dan berdaya tahan terhadap perubahan ujian menjadi mudah.

1. Pasang Pengarang Drama

Untuk menyediakan Penulis Drama, jalankan arahan berikut:

npm init playwright@latest

Anda akan dibimbing melalui wizard persediaan dalam terminal anda. Apabila digesa dengan "Di mana hendak meletakkan ujian hujung ke hujung anda?", anda boleh menetapkannya kepada src/tests (seperti yang disyorkan dalam tutorial terdahulu).

Tambahkan Skrip pada package.json

Dalam package.json anda, tambahkan dua skrip berikut untuk menjalankan ujian Playwright:

Ini membolehkan anda menjalankan ujian dalam kedua-dua pembangunan dan persekitaran CI.

Konfigurasi Penulis Drama

Fail playwright.config.ts hendaklah dikonfigurasikan seperti berikut:

Perubahan Utama dalam Konfigurasi:

• use.baseURL: Ini menetapkan URL asas pelayan pembangunan anda, jadi anda tidak perlu menulisnya dalam setiap ujian.
• webServer: Blok ini menerangkan cara memulakan pelayan pembangunan anda. Ia akan menggunakan semula pelayan yang sudah berjalan melainkan anda berada dalam persekitaran CI.
• testDir: Direktori tempat Penulis Drama harus mencari ujian E2E anda (dalam kes ini, src/tests/e2e).

2. Konfigurasikan MSW untuk Pengujian Penyemak Imbas

Setakat ini, MSW telah disediakan untuk mengejek respons API dalam persekitaran Node.js. Walau bagaimanapun, kerana Playwright menggunakan penyemak imbas sebenar untuk ujian, anda perlu mengkonfigurasi MSW untuk berfungsi dalam persekitaran penyemak imbas.

Buat modul JavaScript baharu yang akan mendaftarkan pekerja perkhidmatan MSW untuk ujian berasaskan pelayar:

3. Daftarkan Pekerja dalam Mod Pembangunan

Untuk memulakan pekerja MSW apabila apl berjalan dalam mod pembangunan, tambahkan yang berikut pada modul akar apl anda (cth., src/main.tsx):

Pastikan anda menetapkan pembolehubah persekitaran VITE_API_MOCK dalam fail .env anda:

VITE_API_MOCK="true"

4. Tulis Ujian E2E

Kini anda boleh menulis ujian E2E untuk aliran dalam apl anda. Berikut ialah contoh ujian Penulis Drama:

5. Menjalankan Ujian

Untuk menjalankan ujian E2E, gunakan arahan berikut:

npm run test:e2e:ci

Ini akan melaksanakan ujian dalam mod CI, yang berguna untuk saluran paip automatik.

Atas ialah kandungan terperinci Konfigurasikan Vitest, MSW dan Penulis Drama dalam projek React dengan Vite dan TS - Bahagian 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!