TypeError jQuery timepicker가 테스트에서 함수가 아닙니다.

Question

ReactJS 구성 요소에 Mocha 및 Chai을 사용하여 테스트를 구축하고 있습니다.

• ScheduleApp
  • 나는이 jQuery 플러그인 bootstrap-timepicker을 사용하고 내 ScheduleForm에서

ScheduleForm : 기본적으로 내 구성 요소의이 구조를 가지고있다. bootstrap-datepicker이라는 또 다른 플러그인을 사용하고 있습니다. 내 ScheduleForm에 componentDidMount을 잘 보았습니다. 현재 이곳에

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

이 구성 요소에 대한 내 테스트 사양입니다 :

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

여기 내 부모 구성 요소의 후

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 파일입니다 내 시험 운영하기 I 이 오류는 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';