FireEvent not getting resolved

[OgaBoss]

I just installed the library

devDependencies": {
    "@testing-library/vue": "^1.0.3",
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-e2e-cypress": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-unit-jest": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "tailwindcss": "^1.0.4",
    "vue-template-compiler": "^2.6.10"
  }

But when i do import { render, fireEvent, cleanup } from '@testing-library/vue' and use it my test

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

describe('Test the Input component function', () => {
	afterEach(cleanup)
	const props = {
		loginMethod: 'phone'
	}
	test('input toggle when icon is clicked', () => {
		const {getByPlaceholderText, getByTestId} = render(Input, {props}, vue => {
			vue.use(VTooltip)
		})

		getByPlaceholderText('Enter a phone number')
		fireEvent.click(getByTestId('toggle-icon'))
		getByPlaceholderText('Email')

	})
})

I get this

And even my IDE (webstorm) cannot resolve fireEvent

Please what am i doing wrong ?

[afontcu]

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!

[OgaBoss]

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],

[afontcu]

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!

[OgaBoss]

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

[afontcu]

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

[OgaBoss]

<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')

	})
})

[afontcu]

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.

[OgaBoss]

Thanks for your time @afontcu i really appreciate it.

[afontcu]

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