Rumah > hujung hadapan web > tutorial js > Menguji Masalah dengan Jest dan ESM dan cara membetulkannya

Menguji Masalah dengan Jest dan ESM dan cara membetulkannya

Linda Hamilton
Lepaskan: 2024-11-09 22:05:02
asal
810 orang telah melayarinya

Testing Troubles with Jest and ESM and how to fix it

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
Salin selepas log masuk
Salin selepas log masuk

Buat fail jest.config.js. Di sini saya menetapkan folder yang hendak diabaikan juga:

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};
Salin selepas log masuk
Salin selepas log masuk

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"
}
Salin selepas log masuk

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);
    });
});
Salin selepas log masuk

Jika anda ingin menguji menggunakan satu fail ujian:

npm test -- banner.test.js
Salin selepas log masuk

Untuk menjalankan semua ujian, kami menggunakan skrip, kami menambah lebih awal dalam package.json:

npm run test
Salin selepas log masuk

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(),
}));
Salin selepas log masuk

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
Salin selepas log masuk
Salin selepas log masuk

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: {},
};
Salin selepas log masuk
Salin selepas log masuk

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!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan