Issues rendering functional components

[afontcu]

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]

I wonder if this would be resolved if we used standard Vue library for rendering rather than test utils?

[afontcu]

I see. So are you suggesting VTL uses its own mount function instead of using test utils at all? (test utils mount source). I wonder what would be the downsides of that (i.e. features that are already baked in in test utils and that should then be mapped here in VTL).

I guess VTL could "just" create a wrapper element and render the component using a plain old render function. Is that the approach you are foreseeing?

Isn't it weird, though? I mean, haven't used test utils that much, but I'm assuming rendering and testing functional components works fine there. Since VTL is built on top of it, shouldn't that work here too?

Thanks!

[dfcook]

It should, and I've tried to debug this but not got anywhere unfortunately.

The way I see it is that the current implementation was as if RTL was built on top of enzyme, however they do have the advantage of having react-dom to help them do a simple render. If we just copy and paste the @vue/test-utils mount then we aren't really gaining anything but if we can render the components simply without the dependency that would be ideal.

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

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