Jest – Mock Window or Document object

user_1676476 0
Viewed 5185

How do you mock (and then test) the Window or Document object with Jest? Especially when it has nested functions that may not yet defined in the file you're testing E.g.

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

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

Similarly, how would you mock document.location? E.g.

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

I was going in the direction of:

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)
  })    
})

I'm guessing you'd do something similar for document.location =. But of course that would be way too easy, and it does not work.

jestjs unit-testing javascript
1 Answers

If you haven't found an answer already, you should be able to mock it like this:

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