[解決済み] Jestを使用してES6モジュールのインポートをモックするにはどうすればよいですか?
2022-03-26 04:06:02
質問
の1つをテストしたいのですが ES6 モジュールは、特定の方法で別の ES6 モジュールを呼び出します。とは ジャスミン これは非常に簡単です。
アプリケーションのコードです。
// myModule.js
import dependency from './dependency';
export default (x) => {
dependency.doSomething(x * 2);
}
そして、テストコードです。
//myModule-test.js
import myModule from '../myModule';
import dependency from '../dependency';
describe('myModule', () => {
it('calls the dependency with double the input', () => {
spyOn(dependency, 'doSomething');
myModule(2);
expect(dependency.doSomething).toHaveBeenCalledWith(4);
});
});
Jestで相当するものは何ですか?こんな単純なことをやりたいような気もするのですが、それを理解するために髪をかきむしっています。
一番近かったのは
import
を
require
のようなもので、テストや関数の中に移動させます。どちらも私がやりたいことではありません。
// myModule.js
export default (x) => {
const dependency = require('./dependency'); // Yuck
dependency.doSomething(x * 2);
}
//myModule-test.js
describe('myModule', () => {
it('calls the dependency with double the input', () => {
jest.mock('../dependency');
myModule(2);
const dependency = require('../dependency'); // Also yuck
expect(dependency.doSomething).toBeCalledWith(4);
});
});
ボーナスポイントとしては、全体の動作が
dependency.js
はデフォルトのエクスポートです。しかし、Jasmineではデフォルトエクスポートのスパイはうまくいかない(少なくとも私はうまくいかなかった)ことを知っているので、Jestでもそれが可能であるという希望を抱いていません。
どうすれば解決するの?
2020年まで早送りすると、このブログ記事が解決策になることがわかりました。 Jestモックのデフォルトと名前付きエクスポート
ES6モジュール構文のみを使用。
// esModule.js
export default 'defaultExport';
export const namedExport = () => {};
// esModule.test.js
jest.mock('./esModule', () => ({
__esModule: true, // this property makes it work
default: 'mockedDefaultExport',
namedExport: jest.fn(),
}));
import defaultExport, { namedExport } from './esModule';
defaultExport; // 'mockedDefaultExport'
namedExport; // mock function
また、一つ知っておかなければならないのは、(私が理解するのに時間がかかったのですが) jest.mock() はテストの中では呼べないということです;モジュールのトップレベルで呼ぶ必要があります。しかし、テストごとに異なるモックを設定したい場合は、個々のテストの内部でmockImplementation()を呼び出すことができます。
関連
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
JavaScriptのクロージャの説明
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] Jestで関数をモックする方法