How to test that a tooltip is shown? #921
Unanswered
JoosepAlviste
asked this question in
Q&A
Replies: 1 comment 2 replies
-
|
Bump, I'm having the same issue using vue-test-utils, I'm clueless tbh |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Yeah, it would be great to have some clarity on this since testing is such an important part of software development 😕 |
Beta Was this translation helpful? Give feedback.
-
|
Hi! So I've found that using Two ways to do so:
// Do the trigger
requestAnimationFrame(() => {
// Make assertions
done()
})
// Do the trigger
await new Promise(requestAnimationFrame)
// Make assertionsMany thanks to this reply: vuejs/vue-test-utils#1421 (comment) |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey, thanks for the library!
I'm trying to write a unit test that checks if a tooltip is shown (using the
v-tooltipdirective) but can't quite get it to show up. I'm using Vue 3,floating-vuev2.0.0-beta.20, Jest and Vue Testing Library. I just have a simple component like this:And my test is also very simple:
import { render, screen, fireEvent } from '@testing-library/vue'; import MyComponent from './MyComponent.vue'; it('shows a tooltip', async () => { render(MyComponent); await fireEvent.mouseEnter(screen.getByText('Hello World')); screen.getByText('Foobar'); });Getting the tooltip by text fails and the element also does not exist in the debug output of the HTML:
I also tried a few other events but couldn't find one that worked. If I recall correctly, triggering the tooltip in a test like this used to work with
v-tooltip.Is there a specific way to test this?
Beta Was this translation helpful? Give feedback.
All reactions