web-dev-qa-db-ja.com

Jest + Vuejsでwindow.location.hrefをモックする方法は?

現在、自分のプロジェクトの単体テストを実装しています。window.location.hrefを含むファイルがあります。

これをモックしてテストしたいのですが、これが私のサンプルコードです:

it("method A should work correctly", () => {
      const url = "http://dummy.com";
      Object.defineProperty(window.location, "href", {
        value: url,
        writable: true
      });
      const data = {
        id: "123",
        name: null
      };
      window.location.href = url;
      wrapper.vm.methodA(data);
      expect(window.location.href).toEqual(url);
    });

しかし、私はこのエラーを受け取ります:

TypeError: Cannot redefine property: href
        at Function.defineProperty (<anonymous>)

私はいくつかの解決策を試しましたが、解決しませんでした。このトラブルから抜け出すためのヒントが必要です。 Plzヘルプ。

29
Hoang Tran Son

提供されている例の多くは、元のLocationオブジェクトのプロパティをモックしていません。

URLには「href」、「search」、「hash」、「Host」などのLocationオブジェクトと同じプロパティが含まれているため、私がしていることは単にLocationオブジェクト(window.location)をURLに置き換えることです。

セッターとゲッターもLocationオブジェクトとまったく同じように機能します。

例:

const realLocation = window.location;

describe('My test', () => {

    afterEach(() => {
        window.location = realLocation;
    });

    test('My test func', () => {

        // @ts-ignore
        delete window.location;

        // @ts-ignore
        window.location = new URL('http://google.com');

        console.log(window.location.href);

        // ...
    });
});
0
Juan Lago