Ich benutze Mocha und JsDom, um meine Reaktionskomponente zu testen.mokka JSDOM testing auf react, getElementById return null
Zunächst funktioniert meine Komponente perfekt, also ist es ein Problem mit der Testumgebung.
Situation:
Ich habe eine Komponente, die ein paar select Tag mit id machen. Dann eine componentDidMount in der Komponente, die document.getElementById verwenden würde, um diese ausgewählten Tags zu erhalten und ihnen Optionen hinzuzufügen. Aber wenn ich meinen Test starte, zeigt er Null für diese getElementById.
Jetzt, wenn ich componentDidMount auskommentieren, und Zeug wie unten behaupten, es funktioniert perfekt, so dass die Komponente diese Auswahl Tags rendern.
describe('test component', function(){
var renderedElement = ReactTestUtils.renderIntoDocument(<Component/>);
var renderedNode = ReactDom.findDOMNode(renderedElement);
it('should have the proper markup', function(){
assert.equal(renderedNode.childElementCount, 5);
[...]
})
})
Was verursacht das Problem? Ist es Ursache document.getElementById das Dokument-Objekt existiert nicht in meiner Testumgebung, weil ich eine "Fälschung" verwende, wenn ja, wie soll ich das testen?
unten ist mein jsdom Setup für Mokka
(function() {
'use strict';
var jsdom = require('jsdom'),
baseHTML,
window;
if (!global.window) {
baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>';
window = jsdom.jsdom(baseHTML).defaultView;
global.window = window;
global.document = window.document;
global.navigator = window.navigator;
}
}());