Question

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

ScheduleApp
- ScheduleForm

在ScheduleForm下我使用此jQuery插件bootstrap-timepicker。我正在使用另一个名为bootstrap-datepicker的插件，它正好运行componentDidMount上的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>
    }
}

这是我的父组件：

// 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，因为它使用全局。

org.springframework.web.client.RestClientException: Could not extract response: no suitable HttpMessageConverter found for response type [com.manuel.jordan.controller.support.GenericCollection<com.manuel.jordan.domain.Persona>] and content type [application/xml]
    at org.springframework.web.client.HttpMessageConverterExtractor.extractData(HttpMessageConverterExtractor.java:109)

TypeError jQuery timepicker不是测试

1 个答案: