-
Notifications
You must be signed in to change notification settings - Fork 668
Failed to mount when returning render function from setup() #1484
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
Failed to mount when returning render function from setup() #1484
Comments
I can't even get returning a render function from I'll try pulling that repo. We should repro without TS; the less dependencies, the better. Edit: I cloned that repo and ran
🤔 |
According to https://github.com/vuejs/composition-api#template-refs it doesnt. That will work for Vue 3 i think. |
This is my understanding too - unless something has changed. It looks like some people have it working? Maybe the readme is outdated. From what I can tell Vue 2 does not expose |
@dobromir-hristov @lmiller1990 I think that the docs you mention is specific to refs, no? For me @vue/composition-api used with Vue 2 does support the I have it working perfectly in the browser, but not when mounted through @vue/test-utils. You can see an exemple here: https://github.com/liip/chusho/blob/master/packages/chusho/src/components/CToggle/CToggle.ts#L64 |
Looks like they do some hackery relating to the render function like we do in VTU I guess some kind of conflict. When I run in VTU, instead of the render function getting called, I get the uncalled render function. It looks like Compsition API expects to be hijacking the original render function, but instead they received our patched one (for |
As a proof of concept I jumped into
And it works as expected - VTU renders the component correctly in the test env. Not sure why, I guess VTU expects a render function to be defined (would need to investigate more). Calling This problem doesn't exist in Vue 3, since it handles this internally. Composition APi is a bit of hack (like VTU is also). Alternatively we need to figure out how to resolve the conflict between Composition API and VTU. I will keep thinking about this, hopefully this info gives someone else something to go on if they want to mess around! A fix for this could be either here or over in composition API. |
@lmiller1990 thanks for your insights! I just tried to create my own function mountWithSetup(component, options = {}) {
component.render = component.setup(options.propsData || {}, {
data: {},
parent: {},
slots: {},
});
return mount(component, options);
} I need to pass the parameters to the setup function (props and context). Props is pretty easy but context contains stuff like In addition, composition API seems to throw warnings then:
|
Fixing this would be nice, but not something I'm able to focus on now unfortunately, and not something we will be doing before v1 - mainly because most people writing tests using the composition API will be moving to Vue 3 (hopefully), which won't have this problem, since composition is built in natively. If you do manage to get something working, happy to take a look. |
Fix is coming for this soon! vuejs/composition-api#383 |
Version
1.0.0-beta.32
Reproduction link
https://github.com/sduduzog/vue-composition-api-tsx-example
Steps to reproduce
npm run test:unit
What is expected?
The component "HelloWorld" should be properly mounted.
What is actually happening?
The component doesn't mount with the following error:
This is actually a cross-post from vuejs/composition-api#151. I’m looking for help to resolve this issue where render functions returned from the composition api
setup
functions are not properly set while mounted through vue-test-utils.At this point I’m wondering if vue-test-utils is the problem here or if it’s totally unrelated. And if it is, I would appreciate some guidance about where to look next to debug it.
The text was updated successfully, but these errors were encountered: