composition-api: Failed to mount when returning render function from setup() while testing with Jest and vue-jest
Code snippet:
// menu.vue
export default {
name: 'Menu',
setup(props, context) {
// logic here...
return () => h('div', options, children)
}
}
// test.js
const localVue = createLocalVue()
localVue.use(VueCompositionApi)
describe('Menu', () => {
it('should render', () => {
const wrapper = mount(Menu, {localVue})
expect(wrapper.html()).toMatchSnapshot()
})
})
which returns the following error
[Vue warn]: Failed to mount component: template or render function not defined.
I’m currently using jest 24.9.0, @vue/test-utils and vue-jest 3.0.5. Other tests work fine with templated SFCs using composition API
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 14
- Comments: 22 (7 by maintainers)
I tried vue-tsx-support before, jest is worked as expected but composition api is not. So just wonder if it’s because of composition api setup function
Yes, read more details here: https://github.com/vuejs/vue-test-utils/issues/1484. Basically it’s a conflict between VTU and composition API, both override the
render
function, VTU to accomplishshallowMount
andstubs
, and this library to allow a component’s setup function to return arender
function.There is a potential fix I describe here, if anyone has some time they can try and implement this in VTU. I have not seen if this breaks anything else in VTU.Here is the start of a fix https://github.com/vuejs/vue-test-utils/pull/1512 however this makes any tests calling
inject
insetup
error out, since we calledsetup
before the instance exists. Maybe we can move this logic somewhere like a mixin with abeforeCreate
hook. The above PR is good place to start debugging this.If you are working on a small/medium app, or just trying out the composition API and liked it, you can probably upgrade to Vue 3 and VTU next fairly easily to have everything work as expected. Plus all the goodness of Vue 3 like Suspense, Portal etc. I am not sure if JSX works for Vue 3 yet, though.
I hope this helps https://github.com/sduduzog/vue-composition-api-tsx-example
I have had the problem before too. Did you make your project with Vue cli? Last time I did TS + TSX, I chose “include babel alonside TypeScript” option, and installed Vue TSX support with
vue add tsx-support
. A bit more info here.Anyway I think this is not a problem with this repo… try the above, you can open an issue in Vue Test Utils if you are still stuck and I can try to help there.
I’ve gone back to using
.vue
component files to avoid this. I do however suspect that this might not have anything to do with the composition api and it’s just on tsx