質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

563閲覧

関数のmock化が理解できない

sasa0330

総合スコア64

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/08/23 06:44

編集2023/08/24 15:40

質問内容

Jestについて勉強中なのですが、mock化の必要性や具体的な使い方がいまいち理解できません。
前提としてNext.jsを使ったアプリケーション内で実行しています。
以下のテストコードを例に質問させていただきます。

app/__tests__/index.test.tsx

1test("テスト1", () => { 2 render(<Home />); 3 //console.log = jest.fn(); 4 const button = screen.getByText("送信する"); 5 fireEvent.click(button); 6 expect(console.log).toHaveBeenCalledWith("送信する"); 7});

app/pages/index.tsx

1export default function Home() { 2 const hundleClick = () => { 3 console.log("送信する"); 4 }; 5 return ( 6 <div> 7 <button onClick={hundleClick}>送信する</button> 8 </div> 9 ); 10}

試したこと

・「テスト1」実行時にエラーになった

● テスト1 expect(received).toHaveBeenCalledWith(...expected) Matcher error: received value must be a mock or spy function Received has type: function Received has value: [Function log]

・console.logをmock化したらテストが通った(コメントアウト部分)

疑問

なぜ「console.log = jest.fn();」が必要なのか理解できませんでした。

JestではNextで使われるconsole.logを理解できないため(Jest内で実行するconsole.logはターミナルへのログ出力に使われており、Next側のconsole.logとは異なるため)、mock関数に置き換えてあげる必要があるという理解であっていますでしょうか?

Jest初学者でふわっとした質問になっていたら申し訳ございません。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/08/24 01:36

> 「テスト1」実行時にエラーになった これはどのようなエラーが出たのでしょうか?
sasa0330

2023/08/24 05:13

ありがとうございます! 追記しました。
guest

回答1

0

ベストアンサー

JestではNextで使われるconsole.logを理解できないため(Jest内で実行するconsole.logはターミナルへのログ出力に使われており、Next側のconsole.logとは異なるため)、mock関数に置き換えてあげる必要があるという理解であっていますでしょうか?

違います。エラーメッセージを読めば分かる通り、console.log呼び出しでエラーが出たわけではありません。

「どのような引数で呼び出されたか」のテストをするために、呼び出し状況を記録できる関数に差し替えないといけないのです。標準のconsole.logのままでは、「どんな引数で何回呼び出されたか」という情報を取得することはできません。


なお、(モックの使い方自体の例文としてならともかく)「console.logをどんな引数で呼んだか」をテストしなければならない場面は、第三者が使うためにログメッセージまで動作仕様となるようなライブラリを作るのでもなければ、そうそう来ないとは思います。

投稿2023/08/24 06:10

編集2023/08/24 06:13
maisumakun

総合スコア145177

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa0330

2023/08/24 06:29

>「どのような引数で呼び出されたか」のテストをするために、呼び出し状況を記録できる関数に差し替えないといけないのです。標準のconsole.logのままでは、「どんな引数で何回呼び出されたか」という情報を取得することはできません。 >モックの使い方自体の例文としてならともかく ありがとうございます!Jestの練習として、例文で試しました。 ということは「関数の呼び出し回数や引数をテストする場合」は関数をmock化する必要があり、単純に関数の戻り値などを確認したい場合はmock化の必要はないという認識であっていますでしょうか?(状況により例外もあるかと思いますが)
maisumakun

2023/08/24 06:32

> 単純に関数の戻り値などを確認したい場合はmock化の必要はない その関数の挙動をテストしたい場面でモックに差し替えてしまっては、それこそ何をテストしているのか分からなくなります。 なお、モックは「呼びたい関数が外部リソースに依存する、未完成、処理時間がかかるなどの事情で、適当な値を返すものに差し替える」ことも多く、今回のような「特定の関数が呼ばれたかを検証したいからその関数を差し替える」というパターンのほうが珍しいです。
sasa0330

2023/08/24 06:40

>「呼びたい関数が外部リソースに依存する、未完成、処理時間がかかるなどの事情で、適当な値を返すものに差し替える」 APIの呼び出しなどですね。 ありがとうございます!なんとなくmockを使う場面が理解できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問