【Jest】window.location.hrefの値を検証したい

あるクリックイベントの中で、最後window.location.hrefで画面遷移させているコンポーネントをテストしたい

JestはNode環境で動いているので、何もせずテストでexpect(window.location.href).toBe(expected)と書いてもWeb標準のwindowがないためエラーになってしまう

そこで、jest-environment-jsdomを利用する

jest-environment-jsdomについては以下で調べた 　 uga-box.hatenablog.com

ただこれだけでもうまくいかなかった

Error: expect(received).toBe(expected) // Object.is equality

Expected: "/expect/path/"
Received: "http://localhost/"

これは検証したいwindow.location.hrefがテスト対象のロジック内で更新しても、 http://localhost/のまま変わらないというもの

原因を調べたらjest-environment-jsdomでモックされたwindow.location.hrefはread-onlyになっているためだった

なので、Object.definePropertyを使って上書きできるようにしてあげる必要があった

developer.mozilla.org

次の処理をテスト前に記述しておくことでwindow.location.hrefに値を検証することができるようになった

  Object.defineProperty(window, "location", {
    value: {
      href: "http://example.com",
    },
  });