2017-01-16 6 views
0

私は'react-day-picker'を使用しているコンポーネントを持っています。jest instace()。simulate( 'dayClick'); TypeErrorが存在しません

このコンポーネントは、メソッドは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); 
    }); 

probこれは、.simulate()'dayClick'を認識しないということです。私は、コンソールで次のエラーを取得する:私は代わりに'click'をシミュレートしようとした場合

TypeError: ReactWrapper::simulate() event 'dayClick' does not exist

、スパイはfalseを返します(そのメソッドが呼び出されることはありません)。

私は間違っていますか?

答えて

1

Simulate only supports events that React understands

https://facebook.github.io/react/docs/test-utils.html#simulate

あなたがdayClickであなたのエラーを取得している理由です。

クリックをシミュレートするには、反応日選択ツールを使用して、onClick propが最終的に割り当てられるDOM要素を調べる必要があります。次に、そのクリックをシミュレートします。


編集 - これは、あなたが正しいDayコンポーネント

+1

<div>にテストをシミュレートすることになりますクリックハンドラ

https://github.com/gpbl/react-day-picker/blob/master/src/Day.js

を取得し、DOMノードを含むコンポーネントでありますdivクラスは有効なdivの.DayPicker-Dayです。したがって:sidebar.find( '。DayPicker-Day')。first()。simulate( 'click');問題を解決しました。 ありがとう –

関連する問題