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 piece of code where document object has a currentScript object. But in test context it is null. So I was thinking of mocking same. But jest.fn() is not really help in same. How can I handle this issue?

Piece of code where jest is failing.

var currentScriptElement = document._currentScript || document.currentScript; var importDoc = currentScriptElement.ownerDocument; 

Test case I have written. component.test.js

import * as Component from './sample-component.js';  describe('component test', function() {   it('check instance', function() {     console.log(Component);     expect(Component).toBeDefined();   }); }); 

Following is the error thrown by jest

Test suite failed to run      TypeError: Cannot read property 'ownerDocument' of null        at src/components/sample-component/sample-component.js:4:39 

Update: As per suggestion from Andreas Köberle, I have added some global vars and tried to mock like following

__DEV__.document.currentScript = document._currentScript = {   ownerDocument: '' }; __DEV__.window = {   document: __DEV__.document } __DEV__.document.registerElement = jest.fn();  import * as Component from './arc-sample-component.js';  describe('component test', function() {   it('check instance', function() {     console.log(Component);     expect(Component).toBeDefined();   }); }); 

But no luck

Update: I have tried above code without __dev__. Also by setting document as global.

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.