Simulating event click does not call component method Jest/Enzyme

Question

Wasted already three days trying to make this test pass. Couldn't find any solution, its seems simulating click does not call component function.

Test case:

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

Component render function:

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

score 0 · Accepted Answer · answered Jul 25 '17 at 11:11

0

Solved this issue with changing onClick={this.focus} to onClick={() => this.focus()}.

This prevented from class method from being called instead of the mock function

answered Jul 25 '17 at 11:11

Canttouchit

3,149
6
38
51

Simulating event click does not call component method Jest/Enzyme

1 Answers1