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
Post a Comment