I am building a range slider component for my application based on ion-range component, but I am stock when I try to test events on it or event update it, nothing seems to affect it. I have try two different testing libraries: @vue/test-utils and @testing-library/vue and I have not found a way to test this component properly. Do you have any suggestions or pointers?
Thanks!
I actually found out a way thanks to the Ionic support team for the pointer. Basically, I needed to cast my Ionic element into a wrapper. So using @vue/test-utils library you can do something as shown below:
it(‘obtains ion-touched on blur’, async () => {
const wrapper = await mountView();
const email = wrapper.findComponent(‘[data-testid=“email-input”]’);
(email as VueWrapper).vm.$emit(‘ionBlur’, { target: email.element });
expect(email.classes()).toContain(‘ion-touched’);
});
To make the ionic component emit the custom event with an options object. So kudos to the Ionic’s support team, thanks for the pointer!