FireEvent not getting resolved about vue-testing-library HOT 9 CLOSED

Hi!

if you console.log(fireEvent), do you see a list of available events to be fired?

I tried to replicate your example assuming a dummy input component, and tests passed (no errors on fireEvent whatsoever). Can you provide a reproduction environment (Codesandbox, git repo, whatever)?

Thanks!

from vue-testing-library.

When i console log i get this

 console.log src/app/Authentication/components/__tests__/input.spec.js:14
      { [Function: fireEvent]
        copy: [Function],
        cut: [Function],
        paste: [Function],
        compositionEnd: [Function],
        compositionStart: [Function],
        compositionUpdate: [Function],
        keyDown: [Function],
        keyPress: [Function],
        keyUp: [Function],
        focus: [Function],
        blur: [Function],
        focusIn: [Function],
        focusOut: [Function],
        change: [Function],
        input: [Function],
        invalid: [Function],
        submit: [Function],
        click: [Function],
        contextMenu: [Function],
        dblClick: [Function],
        drag: [Function],
        dragEnd: [Function],
        dragEnter: [Function],
        dragExit: [Function],
        dragLeave: [Function],
        dragOver: [Function],
        dragStart: [Function],
        drop: [Function],
        mouseDown: [Function],
        mouseEnter: [Function],
        mouseLeave: [Function],
        mouseMove: [Function],
        mouseOut: [Function],
        mouseOver: [Function],
        mouseUp: [Function],
        select: [Function],
        touchCancel: [Function],
        touchEnd: [Function],
        touchMove: [Function],
        touchStart: [Function],
        scroll: [Function],
        wheel: [Function],

from vue-testing-library.

Great then! fireEvent is properly imported and available.

It might have something to do with your use case. First thing I'd do is await for its result, await fireEvent.click(), which is the default way to go in Vue Testing Library.

If that doesn't fix your issue, we might need a repro env to see what's going on in your input component.

Thx!

from vue-testing-library.

That did not solve it, could it be because i am trying to click on an <i></i> tag ?

from vue-testing-library.

Hm, you should be able to send a click event to a <i>. Can you share a trimmed down version of your component?

from vue-testing-library.

<template>
  <div class="mb-4">
    <div class="ec-login-type-toggle" v-if="loginMethod === 'phone'">
      <i role="button" data-testid="toggle-icon" class="fas fa-at" @click="setPreferredLoginMethod('email')"></i>
      <vue-tel-input
        v-model="phone"
        :inputClasses="'appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight'"
        :wrapperClasses="'focus:shadow-outline focus:outline-none'"
        :defaultCountry="'Nigeria'"
        :disabledFetchingCountry="true">
      </vue-tel-input>
    </div>
    <div class="ec-login-type-toggle" v-if="loginMethod === 'email'">
      <i data-testid="toggle-icon" class="fas fa-sms" @click="setPreferredLoginMethod('phone')" v-tooltip="'You can also login/sign-up with phone number'"></i>
      <input v-if="loginMethod === 'email'"
             class="appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             id="email"
             type="email"
             placeholder="Email">
    </div>
  </div>
</template>

<script>
	import VueTelInput from 'vue-tel-input';
	export default {
		components: {
			VueTelInput,
		},
		data() {
			return {
				phone: '',
        loginMethod: 'phone',
			};
		},
    methods: {
	setPreferredLoginMethod(method) {
           this.loginMethod = method
       }
    }
}
</script>

import { render, fireEvent, cleanup } from '@testing-library/vue'
import Input from '../input.vue';
import VTooltip from 'v-tooltip';
import VueTelInput from 'vue-tel-input';

describe('Test the Input component function', () => {
	afterEach(cleanup)
	const props = {
		loginMethod: 'phone'
	}
	test('input toggle when icon is clicked', async () => {
		const {getByPlaceholderText, getByTestId} = render(Input, {props}, vue => {
			vue.use(VTooltip)
			vue.use(VueTelInput)
		})
		getByPlaceholderText('Enter a phone number')
		const icon = getByTestId('toggle-icon');
		await fireEvent.click(icon)
		getByPlaceholderText('Email')

	})
})

from vue-testing-library.

Okay I got it failing. If I replace vue-tel-input with a plain <input type="phone" v-model="phone" placeholder="Enter a phone number" /> element, test passes. Actually, in the error logs there some references about it:

at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40) 
TypeError: Cannot read property 'length' of undefined          
at Document.o (node_modules/vue-tel-input/dist/vue-tel-input.js:1:7295)

Have never used vue-tel-input, so I'm not sure about what's happening there. You could always mock the external dependency and work from there.

from vue-testing-library.

Thanks for your time @afontcu i really appreciate it.

from vue-testing-library.

No problem! Let me know if you find a workaround to properly render vue-tel-input :)

from vue-testing-library.