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

Question

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

测试用例：

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

Answer 1

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

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

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

Simulating event click does not call component method Jest/Enzyme

reactjs

jestjs

enzyme