TypeError jQuery timepicker ist keine Funktion für Test

Question

Ich baue einen Test mit Mocha und Chai für meine ReactJS Komponenten. Im Prinzip habe ich diese Struktur für meine Komponenten:

• ScheduleApp
  • ScheduleForm

Unter meinem ScheduleForm Ich verwende diese jQuery Plugin bootstrap-timepicker. Ich benutze ein anderes Plugin namens bootstrap-datepicker und es läuft gerade gut die componentDidMount auf meinem ScheduleForm.

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

Hier ist meine Mutter Komponente:

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

Hier ist mein Test-Spezifikation für diese Komponente:

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

Hier ist meine jsdom Datei:

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

Nach Ich habe meinen Test gemacht Erhalten Sie diesen Fehler TypeError: (0 , _jquery2.default)(...).timepicker is not a function. Ich kann dieses Feld ohne Probleme auf meinem Browser laden, aber mit meiner Testspezifikation wirft es einen Fehler für das timepicker Plugin aus und es läuft ok mit dem datepicker.

Auch wenn es ist erwähnenswert, bootstrap-datepicker und bootstrap-timepicker die gleiche jQuery verwenden und nur bootstrap-timepicker erfordert window und document in seinen Funktionsparametern, etwa so:

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

Auch gibt es einen Weg, um herauszufinden, wo die jQuery Plugin schlägt fehl? Das wäre wirklich einfach gewesen wenn ich es auf den Protokollen anzeigen würde.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie müssen wahrscheinlich jQuery für Ihre Spezifikation importieren, da es eine globale verwendet.

import jQuery from 'jquery';