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)

Most upvoted comments

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

vip30 on Jan 9, 2020

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 accomplish shallowMount and stubs, and this library to allow a component’s setup function to return a render 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 in setup error out, since we called setup before the instance exists. Maybe we can move this logic somewhere like a mixin with a beforeCreate 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.

lmiller1990 on Apr 23, 2020

I hope this helps https://github.com/sduduzog/vue-composition-api-tsx-example

sduduzog on Feb 19, 2020

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.

lmiller1990 on Jan 8, 2020

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

sduduzog on Dec 29, 2019