Question

我想测试我的handleChange函数，该函数由下拉菜单中的onChange事件触发。这是关于该菜单的反应结构。

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);
    });
  });

我有没有注意到的任何部分？我在测试用例中遗漏了哪些部分。

Answer 1

创建一个间谍方法，并将间谍作为onStationChange道具传递。

const onStationChange = sinon.spy();

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

如何使用酶

1 个答案: