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

Question

質問内容

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

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

export default function Home() {
  const hundleClick = () => {
    console.log("送信する");
  };
  return (
      <div>
        <button onClick={hundleClick}>送信する</button>
      </div>
  );
}

試したこと

・「テスト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初学者でふわっとした質問になっていたら申し訳ございません。
よろしくお願いいたします。

Comments

[maisumakun]

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

これはどのようなエラーが出たのでしょうか？

[sasa0330]

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

Answer 1

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

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

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

---

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

Comments

[sasa0330]

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

ありがとうございます！Jestの練習として、例文で試しました。
ということは「関数の呼び出し回数や引数をテストする場合」は関数をmock化する必要があり、単純に関数の戻り値などを確認したい場合はmock化の必要はないという認識であっていますでしょうか？（状況により例外もあるかと思いますが）

[maisumakun]

> 単純に関数の戻り値などを確認したい場合はmock化の必要はない

その関数の挙動をテストしたい場面でモックに差し替えてしまっては、それこそ何をテストしているのか分からなくなります。

なお、モックは「呼びたい関数が外部リソースに依存する、未完成、処理時間がかかるなどの事情で、適当な値を返すものに差し替える」ことも多く、今回のような「特定の関数が呼ばれたかを検証したいからその関数を差し替える」というパターンのほうが珍しいです。

[sasa0330]

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