Jest中jasmine.createSpy的等价写法 迁移时innerHTML为null报错如何解决

你遇到的TypeError: Cannot read property 'innerHTML' of null报错，本质是document.querySelector没有被正确模拟，调用时返回了null，导致读取innerHTML属性失败。

Jest 中对应 jasmine.createSpy 的等效API是jest.fn()，可以用来创建带模拟返回值、支持调用情况断言的测试间谍函数。

替换后的模拟代码示例 #

// 先构造模拟的dom元素，包含业务代码需要的innerHTML属性
const dummyEl = {
  innerHTML: JSON.stringify({ your: 'test data' }) // 替换为你实际需要的测试JSON字符串
}
// 等价于jasmine.createSpy的写法
document.querySelector = jest.fn().mockReturnValue(dummyEl)

进阶使用建议 #

• 如果需要按选择器参数返回不同的模拟结果，可以用mockImplementation实现更贴合真实场景的模拟：

const TARGET_SELECTOR = '#your-selector' // 替换为业务代码中实际使用的SELECTOR
document.querySelector = jest.fn((selector) => {
  if (selector === TARGET_SELECTOR) {
    return { innerHTML: JSON.stringify({ test: 'data' }) }
  }
  // 其他选择器走原生逻辑或者返回null，按需调整
  return document.querySelectorAll(selector)[0] || null
})

• 测试执行完成后，可以调用jest.clearAllMocks()清理模拟函数的调用记录，避免影响其他测试用例。

完整测试用例参考 #

const SELECTOR = '#app-config'
const mockConfig = { env: 'test', version: '1.0.0' }
const dummyEl = {
  innerHTML: JSON.stringify(mockConfig)
}

// 模拟querySelector
document.querySelector = jest.fn().mockReturnValue(dummyEl)

// 执行业务逻辑
const result = JSON.parse(window.document.querySelector(SELECTOR).innerHTML)

// 断言验证
expect(result).toEqual(mockConfig)
expect(document.querySelector).toHaveBeenCalledExactlyOnceWith(SELECTOR)

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