Jest で ES6 インポートをモックする方法: 包括的なガイド

Jest で ES6 インポートをモックする方法

はじめに

ES6 モジュールをテストするときは、インポートされた依存関係の動作をモックする必要がある場合があります。 Jasmine は単純なアプローチを提供しますが、Jest は少し異なるソリューションを必要とします。

名前付きエクスポートのモック

名前付きエクスポートをモックするには、import * を含むハックを利用できます。次のモジュールを考えてみましょう:

<code class="js">// dependency.js
export const doSomething = (y) => console.log(y);</code>

本番モジュール内:

<code class="js">// myModule.js
import { doSomething } from './dependency';

export default (x) => {
  doSomething(x * 2);
};</code>

テスト内:

<code class="js">import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.doSomething = jest.fn(); // Mutate the named export

    myModule(2);

    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>

デフォルト エクスポート モッキング

同じハックがデフォルトのエクスポートでも機能します:

<code class="js">// dependency.js
export default (y) => console.log(y);</code>

<code class="js">// myModule.js
import dependency from './dependency'; // Note the lack of curlies

export default (x) => {
  dependency(x * 2);
};</code>

<code class="js">import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.default = jest.fn(); // Mutate the default export

    myModule(2);

    expect(dependency.default).toBeCalledWith(4); // Assert against the default
  });
});</code>

注意事項

このハッキング手法は機能しますが、特にテストが順序どおりに実行されない場合、テストでの副作用や予期せぬ動作が発生する可能性があるため、お勧めできません。より堅牢で信頼性の高いモックを作成するには、他の回答または更新されたドキュメントで提案されているように、 jest.spyOn または jest.mock の使用を検討してください。

以上がJest で ES6 インポートをモックする方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。