Genera un errore se il componente React richiede jQuery

Question

Sto provando a verificare un comportamento dei componenti di reazione utilizzando Enzyme describeWithDOM() e mount(). Ma quando le importazioni di componenti jQuery ottengo questo errore:

Errore: jQuery richiede una finestra con un documento

So Enzyme utilizza jsdom sotto il cofano, e ho jsdom sempre pensato si prese cura della finestra e del documento . Ma non riesco a trovare come far funzionare questi lavori insieme.

il codice di prova si presenta così:

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

Nei pulsanti metodo onClick una funzione jQuery si chiama: $('#inputSelector').focus()

Come posso lasciare Enzyme e l'uso jsdom jquery nelle prove?

Answer 1

describeWithDOM è stato rimosso nella versione corrente di enzimi, e invece si consiglia di inizializzare esplicitamente global.document e global.window prima di tutti i test, come mostrato here. Non uso jQuery, ma penso che questo dovrebbe fornire la "finestra con un documento" che sta cercando.

Il codice di inizializzazione che i test l'uso proprio enzima è disponibile nella sua withDom.js di file:

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... 
    } 
} 

Essi utilizzare l'opzione di Mocha --require per garantire esegue prima di una qualsiasi delle prove:

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