Jest – 模拟窗口或文档对象答案

【问题标题】：Jest – Mock Window or Document objectJest – 模拟窗口或文档对象
【发布时间】：2017-09-20 21:59:23
【问题描述】：

您如何使用 Jest 模拟（然后测试）Window 或 Document 对象？尤其是当它具有可能尚未在您正在测试的文件中定义的嵌套函数时，例如

const foo = (payload) => {
    window.webkit.messageHandlers.execute.postMessage(payload)
    return true
}

// Jest: TypeError: Cannot read property 'messageHandlers' of undefined'

同样，你会如何模拟document.location？例如

const bar = (nonce, payload) => {
    document.location = 'native://somefeature/send?nonce=' + nonce + '&payload=' + payload
    return true
}

我的方向是：

describe('foo', () => {
  it('posts a message', () => {
    const payload = 'payload'
    window.webkit.messageHandlers.execute.postMessage = jest.fn()
    let result = foo(payload) 
    expect(window.webkit.messageHandlers.execute.postMessage).toHaveBeenCalledWith(payload)
  })    
})

我猜你会为document.location = 做类似的事情。但是，这当然太容易了，而且行不通。

【问题讨论】：

标签： javascript unit-testing jestjs

【解决方案1】：

如果你还没有找到答案，你应该可以像这样模拟它：

  postMessageMock = jest.fn();
  Object.defineProperty(window, 'webkit', {
    value: { messageHandlers: { execute: { postMessage: postMessageMock } } },
  });

【讨论】：