Jest 测试中如何模拟 window.location.href？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要测试一些与页面跳转相关的功能。这时候，我们就需要模拟 window.location.href 来测试我们的代码。本文将介绍如何在 Jest 测试中模拟 window.location.href，以及一些注意事项和示例代码。

模拟 window.location.href

在 Jest 中，我们可以使用 jest.spyOn() 方法来模拟 window.location.href。具体步骤如下：

首先，在测试文件中导入需要测试的模块，比如：

import { redirectToGoogle } from './example';

然后，在测试用例中使用 jest.spyOn() 方法来模拟 window.location.href，比如：

test('redirectToGoogle should redirect to Google', () => {
  const spy = jest.spyOn(window.location, 'href', 'get');
  redirectToGoogle();
  expect(spy).toHaveBeenCalledWith('https://www.google.com');
  spy.mockRestore();
});

这里，我们使用 jest.spyOn() 方法来模拟 window.location.href，并且使用 'get' 参数来表示我们要模拟的是 window.location.href 的 getter 方法。

最后，我们可以调用需要测试的函数，并且使用 expect() 方法来断言 window.location.href 是否被正确地设置了。

注意事项

在模拟 window.location.href 的时候，我们需要注意一些事项：

我们需要使用 'get' 参数来模拟 window.location.href 的 getter 方法。如果我们需要模拟 window.location.href 的 setter 方法，我们可以使用 'set' 参数。
在测试用例结束后，我们需要使用 spy.mockRestore() 方法来还原 window.location.href 的原本状态。
如果我们需要模拟其它的 window.location 属性，比如 window.location.pathname 或者 window.location.search 等，我们可以使用相同的方式来模拟。

示例代码

下面是一个简单的示例代码，它展示了如何在 Jest 测试中模拟 window.location.href。

// javascriptcn.com 代码示例
// example.js
export const redirectToGoogle = () => {
  window.location.href = 'https://www.google.com';
};

// example.test.js
import { redirectToGoogle } from './example';

test('redirectToGoogle should redirect to Google', () => {
  const spy = jest.spyOn(window.location, 'href', 'get');
  redirectToGoogle();
  expect(spy).toHaveBeenCalledWith('https://www.google.com');
  spy.mockRestore();
});

总结

在 Jest 测试中，我们可以使用 jest.spyOn() 方法来模拟 window.location.href，从而测试与页面跳转相关的功能。需要注意的是，我们需要使用 'get' 参数来模拟 window.location.href 的 getter 方法，并且在测试用例结束后，需要使用 spy.mockRestore() 方法来还原 window.location.href 的原本状态。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6565a12cd2f5e1655deda685