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.
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"
],