-
Notifications
You must be signed in to change notification settings - Fork 257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Unable to use with Vue Final Modal due to teleport #2165
Comments
Hi @doutatsu Anyway, it looks like you have a teleport stub. If you want to test something that uses Teleport, check out the guide in the documentation |
@cexbrayat Apologies for the broken link, I've updated it to make sure it's working now. The issue is that neither stubbing teleporting and not stubbing it doesn't work. I've read documentation countless times and tried a lot of things, and nothing works I am afraid. I have other teleports in my test suite, which works - it's only specifically the modal associated with this library that started breaking since it's major upgrade. |
I took a look at the repro, and if I remove the teleport stub in mount and then log what is in the body element, then I see the empty comment that Vue adds. So the teleportation is working, but maybe you need to do something to display the modal (like calling beforeEach(() => {
const vfm = createVfm();
console.log(window.document.body.outerHTML); // displays <body></body>
baseModal = mount(HelloWorld, {
global: { plugins: [vfm] },
});
console.log(window.document.body.outerHTML); // displays <body><!-----></body>
}); I think Teleport is working fine and I don't see an issue with VTU. You probably need to trigger the display of the modal, and you'll be able to test whatever you want. |
@cexbrayat I see, that actually makes a ton of sense. Previously due to teleport not being present, modal content was always present, hence why tests were working just fine. But now I need to make sure to actually "open" modal - in my case I am still having trouble with fixing tests, as passing through props, as before, seems to not actually trigger visibility, unless I mount the modal with |
No worries, thanks for letting us know 👍 |
@doutatsu would you mind helping me out please? I'm seeing the same issue attempting to test Vue Final Modal. Would you be able to show how you enabled the modal, within jest/vitest, using either vfm or useModal()? Would be really helpful. Thanks. |
@doutatsu I read you're post again and think I can do it via modelValue = true. However that means me ditching vfm / useModal(). This is likely to be a large change, but cant work out how to include vfm / useModal() in my tests, so I have no option I think, |
@doutatsu @adholland, hey!
|
Describe the bug
After updating Vue Final Modal from 3.x to 4.x, it is now impossible to have tests pass for the modal, due to the weird behaviour of teleporting to the body, I presume. Basically it's impossible to test contents of the base modal, as even when stubbing teleport,
To Reproduce
https://stackblitz.com/edit/vue-test-utils-repro-1234?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts
Expected behavior
Tests would pass as normal, without Vue Test Utils throwing an error
Related information:
Here what running
html()
on the modal returns now:Here what it was before (aka it is fully rendered:
Additional context
I am under the impression that this issue falls under Vue Test Utils, as it should be able to handle teleports better, hence why I am opening this report here instead of the Vue Final Modal repo. Do let me know if you feel like it's out of scope of test utils
The text was updated successfully, but these errors were encountered: