Jest 测试中如何 mock 全局的 window 对象？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用全局的 window 对象来获取或设置一些页面元素的属性或方法。然而，在进行单元测试时，我们不希望真正地去操作页面元素，因此需要使用 Jest 提供的 mock 功能来模拟全局的 window 对象。

什么是 Jest？

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它具有简单易用、高效快速、支持多种测试类型等特点，被广泛用于前端开发中的单元测试、集成测试、端对端测试等场景。

如何 mock 全局的 window 对象？

在 Jest 中，我们可以使用 jest.spyOn() 方法来创建一个 window 对象的 mock 副本，并在测试中使用这个 mock 对象来代替真正的 window 对象。具体的实现步骤如下：

首先，在测试文件的顶部引入需要测试的模块：

import { myFunction } from './myModule';

然后，在测试用例中创建一个全局的 window 对象的 mock 副本：

const mockWindow = {
  location: { href: 'http://example.com' },
  alert: jest.fn(),
};

这里我们创建了一个包含 location 和 alert 两个属性的 mock 对象，并使用 jest.fn() 方法来模拟 alert 方法的行为。

接下来，在测试用例中使用 jest.spyOn() 方法来创建一个 window 对象的 mock 副本：

const spy = jest.spyOn(global, 'window', 'get').mockImplementation(() => mockWindow);

这里我们使用 jest.spyOn() 方法来创建一个 window 对象的 mock 副本，并使用 mockImplementation() 方法来指定这个 mock 对象的实现方式为返回我们之前创建的 mockWindow 对象。

最后，在测试用例中调用需要测试的函数，并断言期望的结果：

test('myFunction should call window.alert with "Hello, Jest!"', () => {
  myFunction();
  expect(mockWindow.alert).toHaveBeenCalledWith('Hello, Jest!');
});

这里我们测试了 myFunction 函数是否能够正确地调用 window.alert 方法，并传递了正确的参数。

示例代码

下面是一个完整的示例代码，展示了如何在 Jest 测试中 mock 全局的 window 对象：

// javascriptcn.com 代码示例
// myModule.js
export function myFunction() {
  window.alert('Hello, Jest!');
}

// myModule.test.js
import { myFunction } from './myModule';

const mockWindow = {
  location: { href: 'http://example.com' },
  alert: jest.fn(),
};

const spy = jest.spyOn(global, 'window', 'get').mockImplementation(() => mockWindow);

test('myFunction should call window.alert with "Hello, Jest!"', () => {
  myFunction();
  expect(mockWindow.alert).toHaveBeenCalledWith('Hello, Jest!');
});

spy.mockRestore();

总结

在 Jest 测试中，mock 全局的 window 对象是常见的测试场景之一。通过使用 jest.spyOn() 方法和 mockImplementation() 方法，我们可以轻松地创建一个 window 对象的 mock 副本，并在测试中使用这个 mock 对象来代替真正的 window 对象，从而实现对页面元素的模拟操作。

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