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

本週，我的任務是為我的 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中文網其他相關文章！