TypeError jQueryのtimepickerはテスト時の関数ではありません

Question

私のReactJSコンポーネントにはMochaとChaiを使用してテストを構築しています。基本的に私は私のコンポーネントのためのこのような構造を持っている：私のScheduleFormの下

• ScheduleApp
  • ScheduleForm

私はこのjQueryプラグインbootstrap-timepickerを使用しています。私はbootstrap-datepickerと呼ばれる別のプラグインを使用しています、それは私のScheduleFormの上にcomponentDidMountちょうど良い通知を実行しています。

// ScheduleForm.jsx Component 
import React, {PropTypes} from 'react'; 
import jQuery from 'jquery'; 
import datepicker from 'bootstrap-datepicker'; 
import timepicker from 'bootstrap-timepicker'; 

export default class ScheduleForm extends React.Component { 
    handleChange() { 
     // Some code to handle the 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> 
    } 
} 

ここに私の親コンポーネントです：

// ScheduleApp.jsx Component 
import React from 'react'; 
import ScheduleForm from './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> 
    } 
} 

が今ここにこのコンポーネントの私のテスト仕様である：

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

後：ここで

// test.spec.js 
import React from 'react'; 
import { mount, shallow } from 'enzyme'; 
import {expect} from 'chai'; 
import ScheduleApp from '../src/components/schedule-app.jsx'; 
import ScheduleForm from '../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); 
    }); 
}); 

は私jsdomファイルです私のテストを走っている私このエラーはTypeError: (0 , _jquery2.default)(...).timepicker is not a functionになります。私はブラウザで問題なくこのフィールドを正常に読み込むことができますが、私のテスト仕様では、timepickerプラグインのエラーがスローされ、datepickerで正常に実行されています。また

それは同じのjQueryを使用し、bootstrap-datepickerとbootstrap-timepickerを注目に値しますとだけbootstrap-timepickerのようなので、その機能パラメータのwindowとdocumentを必要とします。また、

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

、見つけるための方法がある場合jQueryプラグインに問題がありますか？私はそれをログに表示すると、これは本当に簡単でした。

ご協力いただければ幸いです。

Answer 1

グローバルを使用しているため、おそらくjQueryをインポートする必要があります。

import jQuery from 'jquery';