Jest 如何模拟 window. Location .href ？

在进行前端测试时，特别是使用像Jest这样的测试框架时，我们经常需要模拟全局对象，比如window.location.href，以便能在不同的测试用例中模拟和测试各种场景。在Jest中，有几种方法可以实现这一点。

方法一：使用 Object.defineProperty

这种方法比较直接，可以在具体的测试用例中或者在全局的测试设置中使用。通过使用Object.defineProperty，我们可以模拟window.location.href的行为。

javascript
beforeEach(() => {
  // 在每个测试用例前，设置 window.location.href 的模拟
  Object.defineProperty(window, 'location', {
    value: {
      href: '初始模拟URL'
    },
    writable: true
  });
});

test('测试 window.location.href 的改变', () => {
  // 模拟 window.location.href 被赋予新的值
  window.location.href = 'http://example.com';
  expect(window.location.href).toBe('http://example.com');
});

方法二：使用 jest.spyOn

如果你不想改动window.location对象本身，而只是想监视或模拟href属性的行为，可以使用jest.spyOn。

javascript
beforeEach(() => {
  // 使用 jest.spyOn 监视 window.location.href 的赋值行为
  jest.spyOn(window.location, 'href', 'set');
});

test('监视 window.location.href 的修改', () => {
  window.location.href = 'http://example.com';
  // 验证是否成功设置了 href
  expect(window.location.href.set).toHaveBeenCalledWith('http://example.com');
});

方法三：重写整个 location 对象

有时候我们可能需要模拟更多的location属性，这时可以考虑重写整个location对象。

javascript
beforeEach(() => {
  // 保存原始的 location 对象
  const originalLocation = window.location;
  delete window.location;
  window.location = { ...originalLocation, href: '初始模拟URL' };
});

afterEach(() => {
  // 测试完成后恢复原始的 location 对象
  window.location = originalLocation;
});

test('验证 window.location 的模拟和恢复', () => {
  expect(window.location.href).toBe('初始模拟URL');
  window.location.href = 'http://example.com';
  expect(window.location.href).toBe('http://example.com');
});

在使用这些方法时，需要根据你的具体需求和情况选择最合适的一种。通常，简单的方法就能满足大多数测试需求。在写测试时，保持代码的简洁性和可维护性是非常重要的。