如何使用Jest + Vuejs模拟window.location.href？

Question

目前，我正在为我的项目实施单元测试，并且其中包含一个文件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>)

我尝试了一些解决方案，但没有解决。我需要一些提示来帮助我摆脱困境。请帮助。

Answer 1

2020 更新

基本的

该URL的对象有很多相同的功能与定位的对象。换句话说，它包括性能，如pathname，search，hostname在大多数情况下，你可以做以下的，等于是：

delete window.location
window.location = new URL('https://www.example.com')

先进的

您还可以模拟您可能需要的Location 方法，这些方法在 URL 界面上不存在：

const location = new URL('https://www.example.com')
location.assign = jest.fn()
location.replace = jest.fn()
location.reload = jest.fn()

delete window.location
window.location = location

Answer 2

你可以试试：

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, 'location', {
  value: {
    href: url
  }
});
expect(window.location.href).toEqual(url);  

看看该问题的Jest Issue：
Jest Issue

Answer 3

来自 GitHub 的2019 年解决方案：

delete global.window.location;
global.window = Object.create(window);
global.window.location = {
  port: '123',
  protocol: 'http:',
  hostname: 'localhost',
};

Answer 4

提供的许多示例并未模拟原始 Location 对象的属性。

我所做的只是用 URL 替换 Location 对象 (window.location)，因为 URL 包含与 Location 对象相同的属性，如“href”、“search”、“hash”、“host”。

Setter 和 Getter 的工作方式也与 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);

        // ...
    });
});

Answer 5

最好的可能是创建一个新的URL实例，以便它分析你的字符串一样location.href做，所以它更新的所有属性location一样.hash，.search，.protocol等。

it("method A should work correctly", () => {
  const url = "http://dummy.com/";
  Object.defineProperty(window, "location", {
    value: new URL(url)
  } );

  window.location.href = url;
  expect(window.location.href).toEqual(url);

  window.location.href += "#bar"
  expect(window.location.hash).toEqual("#bar");
});

https://repl.it/repls/VoluminousHauntingFunctions

Answer 6

2022 年 TS

const orgLocation: Location = window.location;

beforeEach(() => {
  delete (window as any).location;
  window.location = (new URL("http://localhost") as any);
  window.location.assign = ({configurable:true, value:jest.fn()} as any);
  window.location.replace = ({configurable:true, value:jest.fn()} as any);
  window.location.reload = ({configurable:true, value:jest.fn()} as any);
});

afterAll(() => window.location = orgLocation);

Answer 7

我已解决此问题writable: true，方法是将其添加并移至beforeEach

这是我的示例代码：

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, "location", {
    value: {
       href: url
    },
    writable: true
});

Answer 8

@testing-library/react2020 年 window.location.assign 的工作示例：

  afterEach(cleanup)
  beforeEach(() => {
    Object.defineProperty(window, 'location', {
      writable: true,
      value: { assign: jest.fn() }
    })
  })