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