首頁 > web前端 > js教程 > 主體

Jest 和 ESM 的測試問題以及解決方法

Linda Hamilton
發布: 2024-11-09 22:05:02
原創
740 人瀏覽過

Testing Troubles with Jest and ESM and how to fix it

本週,我的任務是為我的 RefactorCode 專案新增測驗。當我開始添加新功能時,我注意到一些現有功能正在崩潰,手動測試所有內容變得越來越困難。這清楚地表明我需要實施適當的自動化測試以確保應用程式穩定。

由於我在之前的《程式設計師雲端運算》課程中使用過 Node.js,因此有過使用 Jest 的經驗,所以我決定也將它用於這個專案。我先寫一些測試來檢查程式碼的功能。但是,我遇到了一些以前從未遇到過的錯誤。經過一些調試和 Stack Overflow 搜尋後,我意識到在 Jest 中使用 ESM(ECMAScript 模組)時需要額外的配置。在我之前的專案中,我使用了 CommonJS,效果非常好。雖然我可以選擇使用 Babel 進行轉換,但 Jest 提供了一個新的測試版功能,讓 ESM 可以直接運作。我決定嘗試一下,效果非常好!

這解釋了與使用 ESM 配置 jest 相關的所有內容:https://jestjs.io/docs/ecmascript-modules

以下是設定的快速概述:

安裝笑話:

npm install --save-dev jest
登入後複製
登入後複製

建立 jest.config.js 檔案。這裡我還設定了要忽略的資料夾:

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};
登入後複製
登入後複製

在 package.json 腳本部分,使用 jest 的實驗參數來處理 ESM 模組:

"scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
}
登入後複製

建立一個測試檔案。我在根目錄的測試資料夾中建立了所有測試。這是我創建的一個簡單的:

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);
    });
});
登入後複製

如果您想使用單一測試檔案進行測試:

npm test -- banner.test.js
登入後複製

為了執行所有測試,我們使用先前在 package.json 中新增的腳本:

npm run test
登入後複製

最後,基本測試完成了。然而,這只是我的故障排除之旅的開始。我在模擬庫和模組方面也遇到了困難,特別是因為它們使用了 ESM。這些需要額外的配置,但經過一些調整後,我能夠讓一切正常工作,並且測試成功運行。

您必須使用jest.unstable_mockModule,而不是使用常規的jest.mock:

For example: await jest.unstable_mockModule("fs", () => ({
  existsSync: jest.fn(),
  readFileSync: jest.fn(),
}));
登入後複製

請參閱本節以了解更多資訊。

我想測試的核心功能之一涉及與 Gemini API 的整合。由於我不想依賴即時 API 進行測試,因此我決定模擬 API 呼叫。最初,我嘗試使用 Nock,但遇到了問題,因為它與 Node 的預設 fetch 實作無法很好地配合。看來 Gemini 函式庫使用的是預設的 fetch 而不是第三方的 fetch 實現,這導致了模擬失敗。經過多次嘗試沒有成功後,我切換到另一個名為MSW(Mock Service Worker)的函式庫。儘管創建模擬伺服器需要更多的設置,但第一次嘗試時它工作得非常完美。我根據 Gemini API 的回應方式製作了一個範例回應,這使我能夠測試重構的功能。

以下是模擬伺服器的設定方式以供參考:

npm install --save-dev jest
登入後複製
登入後複製

您可以看到我正在模擬我用於應用程式的特定 API 端點。現在您要做的就是添加以下內容以在測試時啟動伺服器:

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};
登入後複製
登入後複製

反思這個過程,這對我來說是一次很好的學習經驗。事後看來,我可能應該檢查我正在使用的庫的兼容性,並事先考慮任何潛在的問題。儘管面臨挑戰,我很高興我的測試能夠順利進行。我期待將來添加更多測試並提高專案的整體穩定性。

以上是Jest 和 ESM 的測試問題以及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板