javascript - Enzyme Throws an error if the React Component requires jQuery -


i'm trying test react components behavior using enzyme's describewithdom() , mount(). when component imports jquery error:

error: jquery requires window document

i know enzyme uses jsdom under hood, , thought jsdom took care of window , document. can't seem find how these working together.

the test code looks this:

import chai, {expect} 'chai'; import select './select'; import react, {createelement} 'react'; import {describewithdom, mount} 'enzyme';  describe('ui select', () => {    //more shallow tests here    describewithdom('user actions', () => {     it('toggles .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 buttons onclick method jquery function called: $('#inputselector').focus()

how can let enzyme , jsdom use jquery in tests?

describewithdom has been removed in current version of enzyme, , instead recommended explicitly initialize global.document , global.window before of tests shown here. don't use jquery, think should provide "window document" looking for.

the initialization code enzyme's own tests use available in withdom.js file:

if (!global.document) {   try {     const jsdom = require('jsdom').jsdom; // 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 not supported...   } } 

they use mocha's --require option ensure executes before of tests:

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


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -