Comments (9)
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.
Related Issues (20)
- Tsx with storybook fails when using defineComponents HOT 1
- Unable to make mocking or stubs HOT 3
- ESM export HOT 1
- Is this a valid test? HOT 1
- Problem using `testing-library` with vue <script setup> HOT 1
- Multi-root node components aren't cleaned properly up after each test HOT 3
- Doesn't cleanup with vitest by default HOT 1
- Rendering of child components does not work with @vue/compat HOT 1
- How do I test the hook of beforeRouteEnter in the version of vue 2.6.14
- Passing data to a component using the composition api HOT 1
- Testing with vue-18n and script setup HOT 6
- Teleport containing element with v-if does not render at all HOT 1
- Type safe render options (props, slots, emits) HOT 1
- Unable to use with vue 3.3.x
- 8.0.0 makes it impossible to run with vitest and no global afterEach HOT 1
- after manually calling the umount method, cleanupAtWrapper will report an error HOT 1
- Vuetify Example 404s
- TypeScript v8.1.0: Cannot find module 'type-fest' or its corresponding type declarations - RemoveIndexSignature HOT 1
- document.activeElement state lost after rendering
- Vue-I18n translations bugs with Vue Testing Library, but working with Vue Test Utils.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-testing-library.