Testing issues: setValue() cannot be called on ION-INPUT

I am unable to set the input value of an ion-input uisng Jest:

setValue() cannot be called on ION-INPUT

I then tried to access the Input element inside the tag, as

wrapper.find('[data-testid="email-input"]').find('input');

does not return an element. But in the DOM you can clearly see the Input element:

Screen Shot 2022-05-19 at 8.59.31 am

Actual test error:

 Cannot call setValue on an empty DOMWrapper.

Has anyone had any success with testing a Vue component that is using ? Documentation is still work in progress, showing ‘coming soon’.

Versions used:

"@ionic/cli": "6.19.0",
"@ionic/vue": "^6.0.0",
 "jest": "^27.3.1",
1 Like

Probably this is not related, but we cannot set a value at all on <ion-input> with the latest vue Vue 3.2 breaks "value" property in <ion-input>, <ion-searchbar> in Ionic 5

My team have also been looking for way to do this on component testing there does not see to be a way to interact with the input on the shadow DOM. Can the team of ionic provide clarity on this?

Hey all. I was experiencing the same problem and then I found this answer.

Basically use wrapper.findComponent() and then call setValue('setting value') on the found component.