Skip to content
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: Transition - [Vue warn]: Wrong type passed as event handler to xxx - did you forget @ or : in front of your prop? #2430

Closed
wouterkroes opened this issue May 6, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@wouterkroes
Copy link
Contributor

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

@wouterkroes wouterkroes added the bug Something isn't working label May 6, 2024
@wouterkroes wouterkroes changed the title Bug: Transition: [Vue warn]: Wrong type passed as event handler to xxx - did you forget @ or : in front of your prop? Bug: Transition - [Vue warn]: Wrong type passed as event handler to xxx - did you forget @ or : in front of your prop? May 6, 2024
@cexbrayat
Copy link
Member

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

const stub = defineComponent({
name: name || anonName,
props: (componentOptions as ConcreteComponent).props || {},
// fix #1550 - respect old-style v-model for shallow mounted components with @vue/compat
// @ts-expect-error
model: componentOptions.model,
setup(props, { slots }) {
could not be improved to handle 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.

@wouterkroes
Copy link
Contributor Author

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!

@cexbrayat
Copy link
Member

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

@alecgibson
Copy link
Contributor

#2411

@wouterkroes
Copy link
Contributor Author

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

@cexbrayat
Copy link
Member

Yeah I'm the one who fixed it, and I had already forgotten it. Let's close this then!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants