TypeError jQuery timepicker不是测试中的函数

我正在为我的

ReactJS

组件使用

Mocha

和

Chai

构建一个测试。基本上，我的组件有这样的结构：

• ScheduleApp
  • 时间表

在我的

ScheduleForm

下，我正在使用这个

jQuery

插件。我正在使用另一个名为

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

运行测试后，我得到以下错误

TypeError:（0，jquery2.default）（…）。时间选择器不是一个函数

。我可以在浏览器上毫无问题地加载此字段，但在我的测试规范中，

时间选择器

插件抛出一个错误，并且它在

日期选择器

中运行正常

另外，如果值得注意，

bootstrap-datepicker

和

bootstrap-timepicker

使用相同的jQuery，并且只有

bootstrap-timepicker

在其函数参数中需要

window

和

document

，如下所示：

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

还有，有没有办法找出

jQuery

插件失败的地方？如果我把它显示在日志上，这会很容易

---

任何帮助都将不胜感激。

您可能需要为您的规范导入jQuery，因为它使用全局查询

import jQuery from 'jquery';

---

谢谢你的回复。但我以前已经试过了，但仍然抛出了同样的错误（无论是

bootstrap-datepicker

还是

bootstrap-timepicker

都使用相同的jQuery，但只有

bootstrap-timepicker

抛出错误。您是否也尝试导入插件？将jQuery添加到窗口也会有所帮助。

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

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

import jQuery from 'jquery';