[解決済み] Jest モッキング デフォルトのエクスポート - require vs import
質問
このあたりでjestによるデフォルトエクスポートのモッキングに言及した質問を見かけますが、すでに質問されていないような気がします。
テスト対象のモジュールの依存関係のデフォルトエクスポートをモックする際、モジュールがES6 importステートメントで依存関係をインポートしている場合、テストスイートの実行に失敗し、次のように表示されます。
TypeError: (0 , _dependency.default) is not a function
しかし、そのモジュールが
require().default
の代わりに呼び出す。
私の理解では
import module from location
を直訳すると
const module = require(location).default
なぜこのようなことが起こるのか、非常に混乱しています。私はむしろ、コードスタイルを一貫させて
require
の呼び出しは、元のモジュールに含まれています。
何か方法があるのでしょうか?
モックを使ったテストファイル。
import './modules.js';
import dependency from './dependency';
jest.mock('./dependency', () => {
return {
default: jest.fn()
};
});
// This is what I would eventually like to call
it('calls the mocked function', () => {
expect(dependency).toHaveBeenCalled();
});
依存関係.js
export default () => console.log('do something');
module.js (動作しません)
import dependency from './dependency.js';
dependency();
module.js (動作中)
const dependency = require('./dependency.js').default;
dependency();
解決方法は?
のどちらかを使用することができます。
es6 import
または
require js
を使用して、jestのテストにjsファイルをインポートします。
を使用する場合
es6 import
の場合、jestはすべての依存関係を解決しようとし、またインポートしているクラスのコンストラクタを呼び出すことを知っておく必要があります。このステップの間、あなたは
モック
となります。依存関係が正常に解決されてから、モックの作成に取り掛かることができます。
また、ご覧のように ここで jestはデフォルトでjest.mockをファイルの先頭に持ってくるので、importを配置する順序はあまり重要ではありません。
しかし、あなたの問題はそれとは異なります。モック関数は、あなたがjsファイルを
require js
.
jest.mock('./dependecy', () => {
return {
default: jest.fn()
};
});
を使用してファイルをインポートする場合
require js
このような構造になっています。
というクラスをインポートしたと仮定します。
require js
というメソッドがあり、それをテスト内で呼び出すには、次のようにします。
const test = require('../Test');
test.default.doSomething();
を使ってインポートする場合
es6 import
しかし、その方法は異なります。同じ例を使って
import Test from '../Test';
Test.doSomething();
編集:もし、あなたが
es6 import
に変更し、モック関数を作成します。
jest.mock('./dependecy', () => jest.fn());
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
[解決済み] Jestを使用して単一のテストを実行するにはどうすればよいですか?
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] Node.jsのmodule.exportsとexportsの比較
-
[解決済み] JavaScriptでデフォルトのインポートのエイリアスを作成するにはどうすればよいですか?
-
[解決済み] Jestを使用してES6モジュールのインポートをモックするにはどうすればよいですか?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み] [Solved] ワイルドカードを使って、ディレクトリ内のすべてのファイルからモジュールをインポートすることは可能ですか?
-
[解決済み】ES6モジュールで複数のクラスをエクスポートする
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。