[解決済み] Jestで同じモジュール内の関数をモックするには?
2023-01-23 20:45:38
質問
次の例を正しくモック化するための最良の方法は何でしょうか?
問題は、インポート時間後に
foo
は元のモック解除された
bar
.
module.js
:
export function bar () {
return 'bar';
}
export function foo () {
return `I am foo. bar is ${bar()}`;
}
module.test.js
:
import * as module from '../src/module';
describe('module', () => {
let barSpy;
beforeEach(() => {
barSpy = jest.spyOn(
module,
'bar'
).mockImplementation(jest.fn());
});
afterEach(() => {
barSpy.mockRestore();
});
it('foo', () => {
console.log(jest.isMockFunction(module.bar)); // outputs true
module.bar.mockReturnValue('fake bar');
console.log(module.bar()); // outputs 'fake bar';
expect(module.foo()).toEqual('I am foo. bar is fake bar');
/**
* does not work! we get the following:
*
* Expected value to equal:
* "I am foo. bar is fake bar"
* Received:
* "I am foo. bar is bar"
*/
});
});
変えることができた。
export function foo () {
return `I am foo. bar is ${bar()}`;
}
になります。
export function foo () {
return `I am foo. bar is ${exports.bar()}`;
}
というのがありますが、これはどこでもやるにはかなり醜いと私は思います。
どのように解決するのですか?
紆余曲折を経て、私がたどり着いた解決策は 依存性注入 に、デフォルトの引数を設定することです。
というわけで、私なら
export function bar () {
return 'bar';
}
export function foo () {
return `I am foo. bar is ${bar()}`;
}
から
export function bar () {
return 'bar';
}
export function foo (_bar = bar) {
return `I am foo. bar is ${_bar()}`;
}
これは私のコンポーネントのAPIを壊すような変更ではないので、以下のようにすることで簡単にバーを上書きすることができます。
import { foo, bar } from '../src/module';
describe('module', () => {
it('foo', () => {
const dummyBar = jest.fn().mockReturnValue('fake bar');
expect(foo(dummyBar)).toEqual('I am foo. bar is fake bar');
});
});
これはテストコードも少しきれいになるという利点があります :)
関連
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] モックとスタブの違いは何ですか?
-
[解決済み] Mockitoでvoidメソッドをモックする方法
-
[解決済み] Jestを使用してES6モジュールのインポートをモックするにはどうすればよいですか?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] これは純関数ですか?