Skip to content

Testing: Unable to update value in jest/enzyme tests #87

@CWSites

Description

@CWSites

I'm trying to update the value of a Select2 component, then trigger the onChange to get my test as close to how a real user would.

Component

filterColumns = [
    { text: 'Test', id: 0, value: 'test' },
    { text: 'Foo Bar', id: 1, value: 'foo-bar' }
];

handleInputChange(event) {
     console.log(`${event.currentTarget.name} changed to ${event.currentTarget.value}`);
});
<Select2 jest="filter"
                onChange={this.handleInputChange}
                value={filterArray[i].filter}
                data={this.props.filterColumns} />

Test

Value is never updated, onChange is never called. This is how React + Enzyme say to fire the change event for a select element but it isn't working.

it('addFilter works', () => {
    const wrapper = mount(<CustomFilters filterColumns={filterColumns} />);
    wrapper.find('Select2[jest="filter"]').simulate('change', { target: { value: 'test' } }); 
});

I have also tried the following different ways of updating the value.
filterSelect.value = 'test';
filterSelect.instance().value = 'test';
filterSelect.simulate('change');

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions