Issues rendering functional components

Given the following test:

import { render } from '@testing-library/vue'

const Functional = {
  functional: true,
  template: `<p>Hi!</p>`,
}

it('renders functional comp', () => {
  const { getByText } = render(Functional)

  getByText('Hi!')
})

Running tests output the following error:

The error is obviously gone when removing the functional: true attribute.

---

However, creating a SFC component and setting the functional tag on <template> works:

<template functional>
  <p>Hi!</p>
</template>

Then, tests don’t break.

On the other hand, using SFC then throws when trying to use afterEach(cleanup):

[vue-test-utils]: wrapper.destroy() can only be called on a Vue instance

In this case, setting a wrapper component to render the functional one solves the issue. I was hoping I could fix the other issue the same way, but didn’t work 😕 I’m guessing internal implementation for creating a functional component changes due to SFC.

I could submit a PR to provide a wrapper element if the rendered component is functional, but that won’t solve all problems (probably). Is still worth the effort? Can you think of any other possible solution?

[dfcook]

Added support for functional SFC without a component Pure functional components look like they need to supply a render function rather than a template, added an example illustrating this.

[afontcu]

do you mean something like this?

const Comp = Vue.extend({
  template: `<div>hello world</div>`
})

new Comp().$mount('#app')

Can’t think of a simpler way to render a component 🤔