Mocking `Dokument` im Scherz

Question

Ich versuche, Tests für meine Web-Komponenten-Projekte im Scherz zu schreiben. Ich benutze bereits Babel mit es2015 Preset. Ich habe Probleme beim Laden der Js-Datei. Ich habe folgendes Stück Code, wo document Objekt hat currentScript Objekt. Aber im Testkontext ist es null. Also dachte ich daran, dasselbe zu verspotten. Aber jest.fn() ist nicht wirklich in der gleichen Hilfe. Wie kann ich mit diesem Problem umgehen?

Code, in dem Scherz fehlschlägt.

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

Testfall, den ich geschrieben habe. component.test.js

import * as Component from './sample-component.js'; 

describe('component test', function() { 
    it('check instance', function() { 
    console.log(Component); 
    expect(Component).toBeDefined(); 
    }); 
}); 

Nach der durch Scherz geworfen Fehler

Test suite failed to run 

    TypeError: Cannot read property 'ownerDocument' of null 

     at src/components/sample-component/sample-component.js:4:39 

Update: Gemäß Vorschlag von Andreas Köberle, ich auch global var hinzugefügt und versucht spöttisch wie folgt

__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(); 
    }); 
}); 

Aber kein Glück

Update: Ich habe sogar oben Code ohne __dev__ versucht. Außerdem durch Festlegen des Dokuments als global.

Answer 1

Ich habe dies mit setUpFiles Eigenschaft im Scherz gelöst. Dies wird nach jsdom und vor jedem Test ausgeführt, was für mich perfekt ist.

Set Setupfiles, in Jest Config, z.B .:

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


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

Ideal wäre webcomponents.js werden das Laden der jsdom POLYfill.

Answer 2

konnte ich das gleiche Problem beheben auf NodeJS mit global Rahmen Modul, Dokumenteneinstellung mit mock des Dokuments, in meinem Fall, 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 3

Wenn Sie wie ich Sie suchen Dokument nicht definiert zu verspotten (zB für Server-Seite/Client-Seite Tests) konnte ich in meinem Test-Suiten verwenden Object.defineProperty ohne Setupfiles

Beispiel zu verwenden:

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