Enzym löst einen Fehler aus, wenn die React Component jQuery benötigt

Question

Ich versuche, ein React Components-Verhalten unter Verwendung von describeWithDOM() von Enzym und mount() zu testen. Aber wenn die Komponente Importe jQuery bekomme ich diesen Fehler:

Fehler: jQuery erfordert ein Fenster mit einem Dokument

Ich weiß Enzym jsdom unter der Haube verwendet, und ich dachte immer, jsdom kümmerte sich um die Fenster und Dokument . Aber ich finde nicht, wie man diese zusammenbringt.

Der Test-Code sieht wie folgt aus:

import chai, {expect} from 'chai'; 
import Select from './Select'; 
import React, {createElement} from 'react'; 
import {describeWithDOM, mount} from 'enzyme'; 

describe('UI Select',() => { 

    //more shallow tests here 

    describeWithDOM('User Actions',() => { 
    it('Toggles the .ui-options menu on button click',() => { 
     const wrapper = mount(<Select {...baseProps} />); 
     expect(wrapper.state().open).to.not.be.ok; 
     wrapper.find('button').simulate('click'); 
     expect(wrapper.state().open).to.be.ok; 
    }); 
    }); 
} 

In den Tasten onClick Methode eine Jquery-Funktion aufgerufen wird: $('#inputSelector').focus()

Wie kann ich lassen Enzyme und jsdom Verwendung jquery in den Tests?

Answer 1

describeWithDOM wurde in der aktuellen Version von Enzym, entfernt und stattdessen empfiehlt es sich ausdrücklich global.document und global.window bevor alle Tests zu initialisieren, wie here gezeigt. Ich benutze jQuery nicht, aber ich denke, das sollte das "Fenster mit einem Dokument" liefern, nach dem es sucht.

Der Initialisierungscode, die in der Anwendung eigenen Tests der Enzym withDom.js Datei verfügbar:

if (!global.document) { 
    try { 
    const jsdom = require('jsdom').jsdom; // could throw 

    const exposedProperties = ['window', 'navigator', 'document']; 

    global.document = jsdom(''); 
    global.window = document.defaultView; 
    Object.keys(document.defaultView).forEach((property) => { 
     if (typeof global[property] === 'undefined') { 
     exposedProperties.push(property); 
     global[property] = document.defaultView[property]; 
     } 
    }); 

    global.navigator = { 
     userAgent: 'node.js', 
    }; 
    } catch (e) { 
    // jsdom is not supported... 
    } 
} 

Sie verwenden --require Wahl des Mokka es vor einer der Tests ausführt, um sicherzustellen: Hat

mocha --require withDom.js --compilers js:babel-core/register --recursive test/*.js --reporter dot