模拟事件点击不调用组件方法Jest/Enzyme答案

【问题标题】：Simulating event click does not call component method Jest/Enzyme模拟事件点击不调用组件方法Jest/Enzyme
【发布时间】：2017-12-18 09:55:36
【问题描述】：

Possible duplicate

为了通过这个测试已经浪费了三天时间。找不到任何解决方案，它似乎模拟点击没有调用组件函数。

测试用例：

it('checking focus is called', () => {
    const wrapper = shallow(<NexMultiselect {...mock_props} />);

    wrapper.instance().c = {autosuggest: { input: {focus: ()=>{}} }};
    wrapper.instance().focus = jest.fn();
    wrapper.find('.values_container').simulate('click');

    expect(wrapper.instance().focus).toHaveBeenCalled();
});

组件渲染函数：

    return (
        <span className="multiselect">
            { label && id &&
            <div className="form__field-label"><label htmlFor={id}>{label}</label></div> }
            <span onClick={this.focus} className="values_container">
                {renderedValues}
                <NexAutocomplete
                    {...other}
                    onUpdate={this.onSearchUpdate}
                    data={this.state.data}
                    filter={[{
                        searchOn: 'value',
                        display: 'display'
                    }]}
                    value={this.state.inputText}
                    preferValueFromProps={this.state.preferValueFromProps}
                    ref={c => this.c = c}
                    disabled={size && values.length >= size }
                />
            </span>
        </span>
    );

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

通过将onClick={this.focus} 更改为onClick={() => this.focus()} 解决了这个问题。

这阻止了 class method 被调用而不是 mock function

【讨论】：