Mocking `document` in jest

Question

I\'m trying to write tests for my web components projects in jest. I already use babel with es2015 preset. I\'m facing an issue while loading the js file. I have followed a

Answer 1

Similar to what others have said, but instead of trying to mock the DOM yourself, just use JSDOM:

mocks/client.js

import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window

Then in your jest config:

    "setupFiles": [
      "./__mocks__/client.js"
    ],

Answer 2

I have resolved this using setUpFiles property in jest. This will execute after jsdom and before each test which is perfect for me.

Set setupFiles, in Jest config, e.g.:

"setupFiles": ["<rootDir>/browserMock.js"]


// browserMock.js
Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});

Ideal situation would be loading webcomponents.js to polyfill the jsdom.

Answer 3

If like me you're looking to mock document to undefined (e.g. for server side / client side tests) I was able to use object.defineProperty inside my test suites without having to use setupFiles

Example:

beforeAll(() => {
  Object.defineProperty(global, 'document', {});
})

Answer 4

I have been struggling with mocking document for a project I am on. I am calling document.querySelector() inside a React component and need to make sure it is working right. Ultimately this is what worked for me:

it('should test something', () => {
    const spyFunc = jest.fn();
    Object.defineProperty(global.document, 'querySelector', { value: spyFunc });
    <run some test>
    expect(spyFunc).toHaveBeenCalled()
});

Answer 5

I could resolve this same issue using global scope module on nodejs, setting document with mock of document, in my case, getElementsByClassName:

// My simple mock file
export default {
    getElementsByClassName: () => {
        return [{
            className: 'welcome'
        }]
    }
};

// Your test file
import document from './name.component.mock.js';
global.document = {
    getElementsByClassName: document.getElementsByClassName
};

Answer 6

If you need to define test values for properties, there is a slightly more granular approach. Each property needs to be defined individually, and it's also necessary to make the properties writeable:

Object.defineProperty(window.document, 'URL', {
  writable: true,
  value: 'someurl'
});

See: https://github.com/facebook/jest/issues/890

This worked for me using Jest 21.2.1 and Node v8.11.1