Question

我正在为一小段代码编写测试用例。我有一个具有onClick事件的Tab组件。我正在通过onClick函数传递参数，并且测试以某种方式失败。

{_.map(TABS_LIST, (item, index) => (
    <Tab
        key={_.uniqueId()}
        panelId={`tab-${index}`}
        id={`tab-${index}`}
        onClick={() => this.handleTabClick(index)}
        selected={this.state.selectedTabIndex === index}
    >
    {item}
    </Tab>
))}

handleTabClick(e) {
    this.setState({
        selectedTabIndex: e
    });
}

handleTabClick已在构造函数中与此绑定。

这是测试用例。

it('should onClick Tab', () => {

    wrapper.find('#tab-0').simulate('click', 0);


    expect(wrapper.instance().handleTabClick(0)).toHaveBeenCalledWith(0)
});

错误：

错误：expect（receive）.toHaveBeenCalledWith（... expected）

匹配器错误：接收到的值必须是模拟或间谍函数

接收到的值：未定义

请咨询。

Answer 1

如错误消息所述，toHaveBeenCalledWith仅在您在expect调用中具有模拟函数时才能使用。更多详细信息here。

由于在这里的场景中，您没有调用回调而是设置了状态，因此可以在单击模拟后检查组件状态下selectedTabIndex的值是否已设置了新索引。您可以使用wrapper.state()方法。

带有参数传递的onClick事件-开玩笑-React

1 个答案: