Bug: Transition - [Vue warn]: Wrong type passed as event handler to xxx - did you forget @ or : in front of your prop?
wouterkroes opened this issue · 6 comments
Describe the bug
Vue warnings are present in the stderr of Vitest.
These Vue warnings are not present in the Browser.
[Vue warn]: Wrong type passed as event handler to onBeforeEnter - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Wrong type passed as event handler to onAfterEnter - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Wrong type passed as event handler to onEnterCancelled - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Wrong type passed as event handler to onBeforeLeave - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Wrong type passed as event handler to onAfterLeave - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Wrong type passed as event handler to onLeaveCancelled - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <Transition name="fade" onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> ... >
at <HelloWorld msg="Hello Vitest" ref="VTU_COMPONENT" >
at <VTUROOT>My guess is VTU is not correctly handling Transition in combination with javascript hooks
To Reproduce
stackblitz demo -> npm run test:unit
Expected behavior
I expect no vue warnings in the stderr of Vitest
Related information:
n/a
Additional context
n/a
Hi @wouterkroes
Thanks for the repro. The warning is because the built-in transition stub in VTU is really simple and doesn't handle these hooks.
You have 3 possible solutions that can be used immediatly:
- you can turn off the auto stubbing by using
const wrapper = mount(HelloWorld, { global: { stubs: { transition: false } } }) - you can also define your own transition stub that can handle these hooks if you need to
- you can spy the warning in the test to silence it
We could maybe improve the built-in stub. I'm wondering if this code
test-utils/src/vnodeTransformers/stubComponentsTransformer.ts
Lines 103 to 109 in 9332127
emits as well, and if that would not be enough to solve the issue.Would you like to try to open a PR? That would be a great help and we wold gladly review and merge it.
Hi @cexbrayat,
Thanks for your quick and helpful response.
Your first solution worked for me.
I've decided to save it in the global settings (config.global.stubs.transition = false;).
As for making the built-in stub handle emits too, I feel it might be too complicated for me right now.
So, I'll have to pass on trying to improve it that way for now. Sorry about that.
I have created a PR to add some information to the docs, what do you think of it?
Thanks once again!
@wouterkroes Thanks for the PR
Before I merge it, I think the warning is gone with the latest VTU release we did today.
Can you try with VTU v2.4.6 and let me know if you still see the warnings? (it looks like the warning is gone on your stackblitz repro when I upgrade to v2.4.6)
@cexbrayat you are correct, the v2.4.6 indeed fixes it! Perfect timing!
Thanks for all the help!
And I guess sorry for the duplicate bug report (#2411), that is just mentioned by @alecgibson.
Yeah I'm the one who fixed it, and I had already forgotten it. Let's close this then!