传递参数的 onClick 事件 - Jest - React

Question

我正在为一小段代码编写测试用例。我有一个 Tab 组件，它有一个 onClick 事件。我正在通过 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 已经在构造函数中绑定到 this。

这是测试用例。

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

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


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

错误：

错误：expect(received).toHaveBeenCalledWith(...expected)

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

收到的值：未定义

请指教。

Answer 1

正如错误消息所说，toHaveBeenCalledWith 只能在 expect 调用中有模拟函数时使用。更多详情here.

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