我正在使用 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
插件失败的地方?如果我将其显示在日志上,这将非常容易。
任何帮助将不胜感激。
最佳答案
您可能必须为您的规范导入 jQuery,因为它使用全局。
import jQuery from 'jquery';
关于jquery - TypeError jQuery timepicker 不是测试中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39375224/