Closed doutatsu closed 1 year ago
Hi @doutatsu I'm getting a 404 on your repro
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 https://test-utils.vuejs.org/guide/advanced/teleport.html
@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 know there has been some issues related to teleporting - e.g. this issue (https://github.com/vuejs/test-utils/issues/1781) has been closed, even though one of the latest teleport fixes (https://github.com/vuejs/test-utils/pull/2065) have not fixed it, as mentioned by the PR owner
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 useModal()
or something like that)?
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 modelValue
needs to be true
- which is what happens in regular usage, which is why even though library was working as is, but not in tests.
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 modelValue
as true
, but I imagine it's not a Vue Test Utils issue at this point. I got something to work with now, thanks and sorry for the false positive bug report 🙏🏻
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!
You should add @update:model-value="emit('update:modelValue', $event)"
to the VueFinalModal tag.
See https://github.com/vue-final/vue-final-modal/blob/master/examples/vue3/src/components/MyModal.vue
(vue-final-modal-master/examples/vue3/src/components/MyModal.vue)
Now you can use useModal(...).open()
to open the modal window:
import { ModalsContainer, useModal } from 'vue-final-modal'
import { DefineComponent } from 'vue'
const modal = useModal({
component: MyComponent as DefineComponent<any>,
attrs: {
onClose() {
console.log('Now it works!')
},
},
})
await modal.open()
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