如何使用Jest实现window对象属性值的断言校验

Jest 默认基于 jsdom 模拟了浏览器的 window 运行环境，你可以直接对 window 上挂载的属性进行操作和断言，针对 Google Tag Manager 的 dataLayer 场景，具体实现方式如下：

基础实现：直接断言dataLayer的存储内容 #

如果你的业务代码执行后会往window.dataLayer中推送数据，直接访问该属性做断言即可，参考示例：

// 待测试的业务代码示例：GTM初始化逻辑
function initGTM(gtmId) {
  window.dataLayer = window.dataLayer || []
  window.dataLayer.push({
    event: 'gtm.load',
    'gtm.id': gtmId
  })
}

// 测试用例
test('initGTM会正确初始化dataLayer并推送初始事件', () => {
  // 执行业务逻辑
  initGTM('GTM-ABC123')

  // 断言dataLayer存在
  expect(window.dataLayer).toBeDefined()
  // 断言存储的内容符合预期
  expect(window.dataLayer).toEqual(
    expect.arrayContaining([
      expect.objectContaining({
        event: 'gtm.load',
        'gtm.id': 'GTM-ABC123'
      })
    ])
  )
})

优化：避免测试用例间的状态污染 #

jsdom 模拟的 window 是单例对象，多个用例操作同一个属性会互相干扰，建议在每个用例执行前重置对应属性：

// 每个测试用例执行前清空dataLayer
beforeEach(() => {
  window.dataLayer = []
})

test('用例1推送自定义事件', () => {
  window.dataLayer.push({ event: 'view_home' })
  expect(window.dataLayer.length).toBe(1)
})

test('用例2不会受前一个用例的残留数据影响', () => {
  expect(window.dataLayer.length).toBe(0)
})

进阶：验证push方法的调用行为 #

如果你只需要验证业务代码是否正确调用了dataLayer.push、参数是否符合要求，可以直接将push方法替换为Jest的mock函数：

test('下单逻辑会正确推送purchase埋点事件', () => {
  window.dataLayer = []
  // 把push方法替换为mock函数
  const mockPush = jest.spyOn(window.dataLayer, 'push')

  // 执行业务代码：比如下单成功后的埋点上报逻辑
  reportOrderSuccess({ orderId: '20240501001', payAmount: 199 })

  // 验证push方法被调用，且参数符合预期
  expect(mockPush).toHaveBeenCalledWith(
    expect.objectContaining({
      event: 'ecommerce_purchase',
      order_id: '20240501001',
      pay_amount: 199
    })
  )

  // 测试完成后恢复原push方法
  mockPush.mockRestore()
})

注意事项 #

• 如果你的Jest配置没有默认开启jsdom环境，需要在jest.config.js中添加配置项testEnvironment: 'jsdom'，低于28版本的Jest需要单独安装jest-environment-jsdom依赖
• 所有对window属性的修改建议都在beforeEach/afterEach钩子中做清理，避免全局污染影响其他测试用例

内容的提问来源于stack exchange，提问作者Modekai