Ionic React: How to Test IonSearchBar onChange Listener

Ionic Framework Ionic React
1

I am trying to right a Jest and Enzyme test to for an IonSearchBar implementation. I can’t seem to simulate the onChange event with Enzyme. Is it possible to test the IonSearchBar in this manner?

example,

const ShallowSearchPage = shallow(<SearchPage/>);

it ('', (should fire on onChange event) => {
    let searchBar = ShallowSearchPage.find('IonSearchbar');
    searchBar.simulate('change', { target: { value: 'joseph' } });
})

The above fails with the following error:

Method “simulate” is meant to be run on 1 node. 0 found instead.

I am using Jest and Enzyme for testing. Any help would be most appreciated.

UPDATE:

Turns out that you can’t use Enzyme to target the component element by the tag name, in this case “IonSearchbar”. Instead add an id to the IonSearchbar to your jsx template.

example.

<IonSearchbar id="search-bar">

Then with enzyme target the id instead of the tag.

example:

let searchBar = ShallowSearchPage.find('#search-bar');

UPDATE:

Know my issue is actually getting the change event to fire when attempting to simulate late it. The following does not work:

searchBar.simulate('change');
searchBar.simulate('onchange');
searchBar.simulate('onionchange');

Any help figuring this out would be most appreciated.

2

I am trying to right a Jest and Enzyme test to for an IonSearchBar implementation. I can’t seem to simulate the onChange event with Enzyme. Is it possible to test the IonSearchBar in this manner?

example,

const ShallowSearchPage = shallow(<SearchPage/>);

it ('', (should fire on onChange event) => {
    let searchBar = ShallowSearchPage.find('IonSearchbar');
    searchBar.simulate('change', { target: { value: 'joseph' } });
})

The above fails with the following error:

Method “simulate” is meant to be run on 1 node. 0 found instead.

I am using Jest and Enzyme for testing. Any help would be most appreciated.

UPDATE:

Turns out that you can’t use Enzyme to target the component element by the tag name, in this case “IonSearchbar”. Instead add an id to the IonSearchbar to your jsx template.

example.

<IonSearchbar id="search-bar">

Then with enzyme target the id instead of the tag.

example:

let searchBar = ShallowSearchPage.find('#search-bar');

UPDATE:

Know my issue is actually getting the change event to fire when attempting to simulate late it. The following does not work:

searchBar.simulate('change');
searchBar.simulate('onchange');
searchBar.simulate('onionchange');

Any help figuring this out would be most appreciated.

UPDATE:

After much reading through the Ionic docs, the IonSearchbar 6 events listed on the doc page
https://ionicframework.com/docs/api/searchbar

Using the ionChange event in the .simulate method works. I think the web docs could use some testing examples that give simple examples on how to test Ionic proprietary components.