Ich habe ein reactive-Modul, das Google Maps verwendet, so dass Google Doglex vor dem Ausführen von Tests in das DOM geladen werden muss. Wie kann ich diese externen Bibliotheken in jsdom laden?So laden Sie externe Bibliotheken in jsdom zum Testen von reactjs-Modulen mit vollem Enzym-Rendering
können Sie diese Hilfsklasse verwenden:
// File: loadDOM.js
const jsdom = require('jsdom');
export default (documentLoaded) => {
// Mock Image class since it's not found by default in jsdom
global.Image = class Image {
get complete() {
return true;
}
};
global.navigator = {
userAgent: 'node.js',
};
jsdom.env({
html: '<html><head></head><body></body></html>',
scripts: [
'https://maps.googleapis.com/maps/api/js?libraries=places',
'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
],
done: (err, win) => {
global.window = win;
global.document = win.document;
global.google = win.google;
global.$ = win.jQuery;
// Add other common globals
Object.keys(win).forEach((property) => {
if (typeof global[property] === 'undefined') {
global[property] = win[property];
}
});
// Done!
documentLoaded();
},
});
};Dann laden Sie es einfach in Ihre Tests:
import { expect } from 'chai';
import { beforeEach, describe, it } from 'mocha';
import React from 'react';
import { mount } from 'enzyme';
import Hello from '../../components/Hello';
// Load virtual DOM
import loadDOM from '../loadDOM';
describe('<Hello />',() => {
beforeEach((done) => {
loadDOM(done);
});
it('Renders Hello component',() => {
const props = {
title: 'World',
};
const wrapper = mount(<Hello {...props} />);
expect(wrapper.find('#title')).to.equal(props.title);
});
});