React テストで ‘Cannot destructure property … of undefined’ エラーが出る原因と解決法

はじめに

テストコードを記述しているときに、繰り返し使用するmockを作成しようとした際、mock関数がundefinedになるエラーが発生したため記事にします。

エラー内容

TypeError: Cannot destructure property 'menuStage' of undefined

エラーの内容はプロパティである関数が
undefinedになり分割代入ができないよ。といっています。

発生原因

このエラーはテスト側でモックが正しく設定できていない場合に、
undefinedを返すことで出たエラーです。

私が作成したモックでは正しく関数を設定することができておらず、
今回のようなエラーが発生してしまいました。

const mockUseMenu = jest.fn();
jest.mock("../context/MenuProvider", () => ({
  __esModule: true,
  default: mockUseMenu, // まだ返り値が設定されていない
}));

解決方法

モック関数がレンダリング前に正しい値を返すように設定します。

jest.mock("../context/MenuProvider", () => ({
  __esModule: true,
  default: jest.fn(), // 空の関数を返す
}));

const mockUseMenu = require("../context/MenuProvider").default;

mockUseMenu.mockReturnValue({
  menuStage: "season",
  setMenuStage: jest.fn(),
  setShowMenu: jest.fn(),
});

これにより、コンポーネントがレンダリングされるときに UseMenu() は undefined ではなくオブジェクトを返し、分割代入が成功します。

文の構造

下記はrequireを使用したモジュールの読み込みになります。

const mockUseMenu = require("../context/MenuProvider").default;

• require
  requireを使用しモジュール全体を包み込みます。
  このモジュールのすべてのエクスポートが、オブジェクトとして返ってきます。

• .default
  もし、ESモジュール形式でexport defaultを使用している場合、
  defaultプロパティにアクセスする必要があります。つまり関数を取得することができます。

ESモジュールのexport defaultは、
requireするとオブジェクトのdefaultに入る　→

だから Jest のテストなどで require("../context/MenuProvider").default と書く必要がある

名前付きエクスポートは、require(...).namedExport で取得できる

まとめ

エラー原因はモック関数がundefinedを返していることでしたが、
正しく設定できていなかったことが一番の問題点でした。

今回、モックを何度も繰り返す場面があり、
このようなエラーが発生してしまいましたがエラーを知ることができてよかったです。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼