TypeError jQuery timepicker 不是测试中的函数

Question

我正在使用Mocha 和Chai 为我的ReactJS 组件构建一个测试。基本上我的组件有这个结构：

• 计划应用程序
  • 日程表

在我的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>
    }
}

现在这是我对该组件的测试规范：

// 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 文件：

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

运行测试后，我收到此错误TypeError: (0 , _jquery2.default)(...).timepicker is not a function。我可以在浏览器上正常加载此字段而不会出现问题，但使用我的测试规范它会为 timepicker 插件抛出一个错误，并且使用 datepicker 运行正常。

另外，如果值得注意的是，bootstrap-datepicker 和 bootstrap-timepicker 使用相同的 jQuery，并且只有 bootstrap-timepicker 在其函数参数中需要 window 和 document，如下所示：

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

另外，有没有办法找出jQuery 插件失败的地方？如果我将它显示在日志上，这将非常容易。

任何帮助将不胜感激。

Answer 1

您可能必须为您的规范导入 jQuery，因为它使用全局变量。

import jQuery from 'jquery';