ホームページ > ウェブフロントエンド > jsチュートリアル > Jest と ESM でのテストの問題とその修正方法

Jest と ESM でのテストの問題とその修正方法

Linda Hamilton
リリース: 2024-11-09 22:05:02
オリジナル
807 人が閲覧しました

Testing Troubles with Jest and ESM and how to fix it

今週、私は RefactorCode プロジェクトにテストを追加するという任務を与えられました。新しい機能を追加し始めると、既存の機能の一部が壊れていることに気づき、すべてを手動でテストすることがますます困難になってきました。これにより、アプリケーションが安定していることを確認するために、適切な自動テストを実装する必要があることが明確になりました。

以前のプログラマー向けクラウド コンピューティング コースで Node.js を使用して Jest を使用した経験があったため、このプロジェクトでも Jest を使用することにしました。コードの機能をチェックするためにいくつかのテストを作成することから始めました。ただし、これまで経験したことのないエラーがいくつか発生しました。スタック オーバーフローでデバッグと検索を行った結果、Jest で ESM (ECMAScript モジュール) を使用する場合は追加の設定が必要であることがわかりました。以前のプロジェクトでは CommonJS を使用していましたが、それは完璧に機能しました。変換に Babel を使用することもできましたが、Jest は ESM を直接実行できる新しいベータ機能を提供しました。試してみることにしましたが、とてもうまくいきました!

これは、ESM を使用した jest の構成に関連するすべてを説明しています: https://jestjs.io/docs/ecmascript-modules

セットアップの概要を次に示します:

Jest をインストールします:

npm install --save-dev jest
ログイン後にコピー
ログイン後にコピー

jest.config.js ファイルを作成します。ここで、無視するフォルダーも設定します:

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};
ログイン後にコピー
ログイン後にコピー

package.json スクリプト セクションで、ESM モジュールを操作するための jest の実験的な引数を使用します。

"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.mock を使用する代わりに、jest.unstable_mockModule:
を使用する必要があります。

For example: await jest.unstable_mockModule("fs", () => ({
  existsSync: jest.fn(),
  readFileSync: jest.fn(),
}));
ログイン後にコピー

詳細については、このセクションを参照してください。

私がテストしたいと思っていた中心的な機能の 1 つは、Gemini API との統合に関係していました。テストのためにライブ API に依存したくなかったので、API 呼び出しをモックすることにしました。最初は Nock を使用しようとしましたが、Node のデフォルトのフェッチ実装ではうまく機能せず、問題が発生しました。 Gemini ライブラリがサードパーティのフェッチ実装ではなくデフォルトのフェッチを使用していたため、モックが失敗したようです。何度か試みて失敗した後、MSW (Mock Service Worker) という別のライブラリに切り替えました。モックサーバーを作成するにはもう少しセットアップが必要でしたが、最初の試行では問題なく動作しました。 Gemini API がどのように応答するかに基づいて応答例を作成し、リファクタリングされた機能をテストできるようにしました。

参考のためにモックサーバーがどのように設定されたかを次に示します:

npm install --save-dev jest
ログイン後にコピー
ログイン後にコピー

アプリケーションに使用している特定の API エンドポイントをモックしていることがわかります。あとは、テスト中にサーバーを起動するために以下を追加するだけです:

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};
ログイン後にコピー
ログイン後にコピー

このプロセスを振り返ると、これは私にとって素晴らしい学習経験でした。今にして思えば、使用していたライブラリの互換性をチェックし、潜在的な問題がないか事前に検討すべきだったと思います。課題はありましたが、テストがスムーズに実行できるところまで到達できてうれしいです。今後さらにテストを追加し、プロジェクト全体の安定性を向上させることを楽しみにしています。

以上がJest と ESM でのテストの問題とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート