在前端开发中，我们经常需要进行单元测试来保证代码的质量和稳定性。而 Jest 是一个非常流行的 JavaScript 测试框架，它提供了一系列强大的工具和 API，可以帮助我们进行各种类型的测试。在某些情况下，我们可能需要 Mock 掉 window 对象，以便更好地进行测试。本文将介绍如何在 Jest 中 Mock 掉 window。
Mock window 对象的原因
在进行单元测试时，我们通常需要在一个隔离的环境中运行我们的代码，以便更好地控制测试的场景和结果。然而，在前端开发中，我们经常会使用一些浏览器原生的 API，例如 window 对象，这些 API 可能会依赖于浏览器环境，难以在测试环境中运行。为了解决这个问题，我们需要 Mock 掉这些 API，以便在测试环境中模拟出浏览器的行为。
如何 Mock window 对象
在 Jest 中，我们可以使用 jest.fn() 方法来创建一个 Mock 函数，用来替代 window 对象中的方法或属性。例如，我们可以使用以下代码来 Mock 掉 window.alert() 方法：
window.alert = jest.fn();
这样，当我们在测试中调用 window.alert() 方法时，实际上调用的是 Mock 函数，而不是浏览器原生的 alert() 方法。我们可以使用 jest.fn() 方法来 Mock 掉 window 对象中的任何方法或属性，例如：
window.prompt = jest.fn(); window.localStorage.getItem = jest.fn(); window.document.createElement = jest.fn();
在某些情况下，我们可能需要 Mock 掉整个 window 对象，以便在测试中模拟出完整的浏览器环境。为了达到这个目的，我们可以使用 jsdom 这个库来创建一个虚拟的 DOM 环境，并将其传递给 Jest 的测试环境。以下是一个示例代码：
const { JSDOM } = require("jsdom");
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, {
url: "http://localhost"
});
global.window = dom.window;
global.document = dom.window.document;在这个示例中，我们使用 JSDOM 创建了一个包含一个 <p> 元素的虚拟 DOM 环境，并将其赋值给 Jest 的全局变量 window 和 document。这样，在测试中，我们就可以使用这些 Mock 对象来模拟浏览器环境了。
总结
Mock 掉 window 对象在前端单元测试中非常常见，它可以帮助我们更好地控制测试场景和结果，提高代码的质量和稳定性。在 Jest 中，我们可以使用 jest.fn() 方法来创建 Mock 函数，用来替代 window 对象中的方法或属性。在某些情况下，我们还可以使用 jsdom 这个库来创建一个虚拟的 DOM 环境，并将其传递给 Jest 的测试环境。希望本文对你有所帮助，让你更加熟练地使用 Jest 进行单元测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657980f0d2f5e1655d38a3e0