Rumah > Artikel > hujung hadapan web > Menguji Masalah dengan Jest dan ESM dan cara membetulkannya
Minggu ini, saya ditugaskan untuk menambah ujian pada projek RefactorCode saya. Semasa saya mula menambah ciri baharu, saya perasan bahawa beberapa ciri sedia ada telah rosak, dan menjadi semakin sukar untuk menguji semuanya secara manual. Ini menjelaskan bahawa saya perlu melaksanakan ujian automatik yang betul untuk memastikan aplikasi itu stabil.
Memandangkan saya mempunyai pengalaman terdahulu dengan Jest daripada kursus Pengkomputeran Awan untuk Pengaturcara sebelum ini, tempat saya bekerja dengan Node.js, saya memutuskan untuk menggunakannya untuk projek ini juga. Saya mulakan dengan menulis beberapa ujian untuk menyemak kefungsian kod saya. Walau bagaimanapun, saya menghadapi beberapa ralat yang tidak pernah saya hadapi sebelum ini. Selepas beberapa debugging dan mencari melalui Stack Overflow, saya menyedari bahawa terdapat konfigurasi tambahan yang diperlukan apabila menggunakan ESM (ECMAScript Modules) dengan Jest. Dalam projek saya sebelum ini, saya telah menggunakan CommonJS, yang berfungsi dengan sempurna. Walaupun saya boleh memilih untuk menggunakan Babel untuk penukaran, Jest menawarkan ciri beta baharu yang membenarkan ESM dijalankan secara langsung. Saya memutuskan untuk mencubanya, dan ia berkesan!
Ini menerangkan semua yang berkaitan dengan mengkonfigurasi jest dengan ESM: https://jestjs.io/docs/ecmascript-modules
Berikut ialah ikhtisar ringkas persediaan:
Pasang Jest:
npm install --save-dev jest
Buat fail jest.config.js. Di sini saya menetapkan folder yang hendak diabaikan juga:
export default { testPathIgnorePatterns: ["/node_modules/", "/examples"], transform: {}, };
Dalam bahagian skrip package.json, gunakan hujah percubaan untuk jest berfungsi dengan modul ESM:
"scripts": { "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js" }
Buat fail ujian. Saya mencipta semua ujian dalam folder ujian dalam direktori akar. Berikut ialah yang mudah saya buat:
import { readFile, checkIfDirectory } from "../src/fileUtils"; describe("File Utility", () => { test("Read File", () => { readFile("./examples/test.txt").then((data) => { expect(data).toBe("Hello World"); }); }); test('should return true if the path is a directory', async () => { const result = await checkIfDirectory('./examples'); expect(result).toBe(true); }); });
Jika anda ingin menguji menggunakan satu fail ujian:
npm test -- banner.test.js
Untuk menjalankan semua ujian, kami menggunakan skrip, kami menambah lebih awal dalam package.json:
npm run test
Akhirnya, ujian asas telah disediakan. Walau bagaimanapun, ini hanyalah permulaan perjalanan penyelesaian masalah saya. Saya juga menghadapi kesukaran dengan perpustakaan dan modul yang mengejek, terutamanya kerana mereka menggunakan ESM. Ini memerlukan konfigurasi tambahan, tetapi selepas beberapa pengubahsuaian, saya dapat memastikan semuanya berfungsi dan ujian berjalan dengan jayanya.
Daripada menggunakan jest.mock biasa, anda perlu menggunakan jest.unstable_mockModule:
For example: await jest.unstable_mockModule("fs", () => ({ existsSync: jest.fn(), readFileSync: jest.fn(), }));
Lihat bahagian ini untuk mendapatkan maklumat lanjut.
Salah satu fungsi teras yang saya ingin uji melibatkan penyepaduan dengan API Gemini. Memandangkan saya tidak mahu bergantung pada API langsung untuk ujian, saya memutuskan untuk mengejek panggilan API. Pada mulanya, saya cuba menggunakan Nock, tetapi saya menghadapi masalah kerana ia tidak berfungsi dengan baik dengan pelaksanaan pengambilan lalai Node. Nampaknya pustaka Gemini menggunakan pengambilan lalai dan bukannya pelaksanaan pengambilan pihak ketiga, yang menyebabkan olok-olok itu gagal. Selepas beberapa percubaan tidak berjaya, saya beralih ke perpustakaan lain yang dipanggil MSW (Mock Service Worker). Walaupun ia memerlukan sedikit lagi persediaan untuk mencipta pelayan olok-olok, ia berfungsi dengan sempurna pada percubaan pertama. Saya mencipta respons contoh berdasarkan cara API Gemini akan bertindak balas, yang membolehkan saya menguji fungsi pemfaktoran semula.
Berikut ialah cara pelayan olok-olok disediakan untuk rujukan:
npm install --save-dev jest
Anda dapat melihat bahawa saya mengejek titik akhir API tertentu yang saya gunakan untuk aplikasi. Sekarang semua yang anda perlu lakukan ini tambahkan di bawah untuk memulakan pelayan semasa menguji:
export default { testPathIgnorePatterns: ["/node_modules/", "/examples"], transform: {}, };
Memikirkan proses itu, ini merupakan pengalaman pembelajaran yang hebat untuk saya. Jika difikirkan semula, saya mungkin sepatutnya menyemak keserasian perpustakaan yang saya gunakan dan mempertimbangkan sebarang isu yang berpotensi terlebih dahulu. Walaupun menghadapi cabaran, saya gembira kerana telah mencapai tahap di mana ujian saya berjalan lancar. Saya tidak sabar untuk menambah lebih banyak ujian pada masa hadapan dan meningkatkan kestabilan keseluruhan projek saya.
Atas ialah kandungan terperinci Menguji Masalah dengan Jest dan ESM dan cara membetulkannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!