我有一个使用 'react-day-picker'
的组件。
此组件有一个名为 handleDayClick
的方法:
handleDayClick(e, day, {disabled}) {
if (disabled) {
// Do not update the state if the day is disabled
return;
}
this.setState({ selectedDay: day });
this.props.dateClick(day);
};
然后它作为 onDayClick 道具传递给 :
<DayPicker
onDayClick={ this.handleDayClick.bind(this) }
selectedDays={ day => DateUtils.isSameDay(day, this.state.selectedDay) }
disabledDays={ isWeekend }
/>
现在我想写一个测试来模拟日期上的点击事件,看看它是否触发了正确的方法:
it('DayPicker should call handleDayClick on click', () => {
const sidebar = mount(<Sidebar />);
let spy = sinon.spy(sidebar.instance(), 'handleDayClick');
sidebar.update();
sidebar.find(DayPicker).simulate('dayClick');
expect(spy.called).toBe(true);
});
这样做的问题是 .simulate() 无法识别'dayClick'
。我在控制台中收到以下错误:
类型错误:ReactWrapper::simulate() 事件"dayClick"不存在
如果我尝试模拟'click'
,间谍会返回false
(因此永远不会调用该方法)。
我做错了什么?
模拟仅支持 React 理解的事件
(https://facebook.github.io/react/docs/test-utils.html#simulate)
这就是为什么您在dayClick上收到错误的原因。
要模拟点击,您应该潜入反应日选择器,并找出 onClick 道具最终分配给哪个 DOM 元素。然后模拟点击。
编辑 - 这是包含获取单击处理程序的 DOM 节点的组件
https://github.com/gpbl/react-day-picker/blob/master/src/Day.js
您应该在Day
组件内的<div>
上模拟测试