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

在前端开发中，我们经常会用到全局 window 对象来获取或设置浏览器中的相关信息。然而，在进行单元测试时，由于无法在 Node.js 环境中模拟 window 对象，我们需要使用 Jest 提供的模拟功能，手动模拟全局 window 对象来进行测试。

安装 Jest

首先，我们需要安装 Jest。在命令行中输入以下命令（需要预先安装 Node.js）：

npm install jest --save-dev

手动创建全局 window 对象

创建全局 window 对象的方法有很多种，下面介绍两种比较常用的方法。

方法一：使用 jsdom

jsdom 是用于模拟浏览器环境的一个库，它提供了一个类似于浏览器中 window 对象的 DOM 对象。可以使用以下代码在测试文件中手动创建全局 window 对象：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
global.window = dom.window;

通过以上代码，我们可以在全局创建一个 window 对象，这个对象具有类似于浏览器中的 window 对象的一些属性和方法。

方法二：使用 mock window 对象

另外一种方法是手动创建一个 mock 的 window 对象，该对象包含了我们需要测试的属性和方法。

global.window = {
  location: {
    hostname: 'example.com',
    href: 'https://example.com/'
  },
  sessionStorage: {
    getItem: function(key) { return null; },
    setItem: function(key, value) {}
  }
}

以上代码创建了一个包含了 location 和 sessionStorage 属性的 mock window 对象。

使用 Jest 的 mock 功能

创建了全局 window 对象之后，我们就可以使用 Jest 提供的 mock 功能来进行单元测试了。示例代码如下：

test('测试全局 window 对象', () => {
  // 模拟全局 window 对象
  global.window = {
    location: {
      hostname: 'example.com',
      href: 'https://example.com/'
    },
    sessionStorage: {
      getItem: function(key) { return null; },
      setItem: function(key, value) {}
    }
  }

  // 调用需要测试的方法或组件
  const result = myFunc()

  // 断言结果
  expect(result).toBe(expectedResult)
})

在上面的代码中，我们首先模拟了全局 window 对象，然后调用需要测试的方法或组件，并进行结果的断言。这样，我们就可以在单元测试中模拟浏览器环境，对全局 window 对象进行各种测试了。

总结

在进行单元测试时，模拟全局 window 对象是十分必要的。本文介绍了两种手动创建全局 window 对象的方法，以及使用 Jest 的 mock 功能进行测试的示例代码。通过本文的学习，你可以更好地进行前端单元测试，提高代码的质量和可靠性。

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