reactjs - TypeError jQuery timepicker is not a function on test -

i'm building test using mocha , chai reactjs components. have structure components:

• scheduleapp
  • scheduleform

under scheduleform i'm using jquery plugin bootstrap-timepicker. i'm using plugin called bootstrap-datepicker , running fine notice componentdidmount on scheduleform.

// scheduleform.jsx component import react, {proptypes} 'react'; import jquery 'jquery'; import datepicker 'bootstrap-datepicker'; import timepicker 'bootstrap-timepicker';  export default class scheduleform extends react.component {     handlechange() {         // code handle onchange event     }      componentdidmount() {         jquery(this.refs.startdate).datepicker({             autoclose: true,             format: 'yyyy-mm-dd'         }).on("changedate", function(e) {             this.onstartdatechange(e);         }.bind(this));          jquery(this.refs.starttime).timepicker({             defaulttime: '8:00 am',             snaptostep: false         }).on('changetime.timepicker', function(e) {             this.onstarttimechange(e);         }.bind(this));          jquery(this.refs.endtime).timepicker({             defaulttime: '2:00 pm',             snaptostep: false         }).on('changetime.timepicker', function(e) {             this.onendtimechange(e);         }.bind(this));     }      render() {         <div>             <div classname="form-group">               <label>start date</label>               <input classname="form-control" type="text" onchange={this.handlechange} ref="startdate" />             </div>             <div classname="form-group">               <label>start time</label>               <input classname="form-control" type="text" onchange={this.handlechange} ref="starttime" />             </div>             <div classname="form-group">               <label>end time</label>               <input classname="form-control" type="text" onchange={this.handlechange} ref="endtime" />             </div>         </div>     } } 

here's parent component:

// scheduleapp.jsx component import react 'react'; import scheduleform './schedule-form.jsx';  export default class scheduleapp extends react.component {     constructor() {         super();         this.state = {             starttime: '8:00 am',             endtime: '2:00 pm'         }     }      handlestarttimechange(starttime) {         this.setstate({             starttime: starttime         });     }      handleendtimechange(endtime) {         this.setstate({             endtime: endtime         });     }      render() {         return <div>                     <scheduleform                             handlestarttimechange={this.handlestarttimechange.bind(this)}                             handleendtimechange={this.handleendtimechange.bind(this)}                             starttime={this.state.starttime}                             endtime={this.state.endtime} />                 </div>     } } 

now here test spec component:

// test.spec.js import react 'react'; import { mount, shallow } 'enzyme'; import {expect} 'chai'; import scheduleapp '../src/components/schedule-app.jsx'; import scheduleform '../src/components/schedule-form.jsx';  describe('<scheduleapp/>', function() {   it('contains 1 <scheduleform/> component', function() {     const wrapper = mount(<scheduleapp />);     expect(wrapper.find(scheduleform)).to.have.length(1);   }); }); 

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

after running test error typeerror: (0 , _jquery2.default)(...).timepicker not function. can load field fine without problem on browser test spec throws out error timepicker plugin , it's running ok datepicker.

also if it's worth noting, bootstrap-datepicker , bootstrap-timepicker use same jquery , bootstrap-timepicker requires window , document in function parameter, so:

(function($, window, document) { }()) 

also, there way find out jquery plugin failing? have been easy if shows on logs.

any appreciated.

you have import jquery spec uses global.

import jquery 'jquery';