2017-11-09 6 views
0

드롭 다운 메뉴에서 onChange 이벤트에 의해 트리거되는 내 handleChange 함수를 테스트하고 싶습니다. 이 메뉴에 대한 반응 구조가 있습니다. 방법을 테스트하는 방법은 효소로 한번 호출됩니다

class StationNavigationBar extends React.Component { 
handleChange = (event, index, value) => { 
    this.props.onStationChange(value); 
    } 

render() { 
    return (
<DropDownMenu value={this.props.initial} onChange={this.handleChange}> 
       { this.props.stations.map((station, index) => 
       <MenuItem key={station.id} value={station.id} primaryText={station.name} /> 
      )} 
      </DropDownMenu> 
); 
} 
} 

는 그 handleChange 기능을 감시하는 효소를 사용하려고하지만, 스파이 기능은 여기에서 OnChange 이벤트를 감지 내 현재 테스트 코드없는 것 같다.

describe("when `dropDownMenu` is changed",() => { 
    it("onStationChange should be called",() => { 
    let props = { 
     initial: 'Something', 
     title: 'something', 
     onStationChange:()=>{}, 
     onLogOut:()=>{}, 
     stations: [{ 
     id: '1', 
     name: "Station 2" }, 
     { id: '2', 
     name: "Station 3" }, 
     { id: '3', 
     name: 'Station 4'}] 
    }; 
    const stationNavigationBar = shallow(<StationNavigationBar {...props} />); 
    const instance = stationNavigationBar.instance(); 
    const goSpy = sinon.spy(instance, 'handleChange'); 
    stationNavigationBar.update(); 
    const toolbarGroup = stationNavigationBar.find('ToolbarGroup'); 
    const dropDownMenu = toolbarGroup.find('DropDownMenu'); 
    dropDownMenu.simulate('change'); 
    expect(goSpy.calledOnce).toBe(true); 
    }); 
    }); 

내가 신경을 쓰지 않았던 부분이 있습니까? 테스트 케이스에서 누락 된 부분은 무엇입니까?

+0

@OriDrori, 아니, 시도 이미 내가 그 부분을 넣어해야, 내가 const를 goSpy = sinon.spy이 내 코드에서 생각 sinon – Darren

+0

(인스턴스를, 'handleChange') – Darren

답변

1

스파이 방법을 만들고 스파이를 onStationChange 소품으로 전달하십시오.

const onStationChange = sinon.spy(); 

const props = { 
    initial: 'Something', 
    title: 'something', 
    onStationChange, 
    //... 
}; 
+0

,하지만하지 않았다 work – Darren

+0

지금 사용해보십시오. 스파이를 변경하는 것을 잊어 버렸습니다. 이는 스파이가 메소드가 아닌 래퍼가 아닌 것으로 전달한 것입니다. –

+0

예, 작동합니다. 감사! – Darren