Rumah >hujung hadapan web >tutorial js >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.
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).
Dalam package.json anda, tambahkan dua skrip berikut untuk menjalankan ujian Playwright:
Ini membolehkan anda menjalankan ujian dalam kedua-dua pembangunan dan persekitaran CI.
Fail playwright.config.ts hendaklah dikonfigurasikan seperti berikut:
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:
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"
Kini anda boleh menulis ujian E2E untuk aliran dalam apl anda. Berikut ialah contoh ujian Penulis Drama:
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!