1

I'm writing unit tests for my Vue 3 Composition API component in Vitest. All of my unit tests pass for the component without an issue - however, I'm getting this warning from Vue when I run them:

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

The offending code is a Teleport tag that renders a modal when a store value is true. If I comment that code out, or empty the slot of any content, the warning does not appear. I have tried stubbing Teleport, where the template is <div>Hello World</div> and <div><slot></slot></div>, but this did not resolve the issue.

<Teleport to="body">
      <Modal v-if="showModal" :is-open="showModal" @close="closeModal">
        <component
          :is="childBlock.component"
          v-for="childBlock in $store.ui.getActiveModalCardContent"
          :key="childBlock._uid"
          :blok="childBlock"
          class="col-span-2"
        />
      </Modal>
    </Teleport>

I've looked up the warning code but the solutions I've seen use a render function to create their components rather than it happening with a template. I don't get any issues, warnings or otherwise, in the console when the app runs; only when testing.

I've tried swapping out some of the data being passed in with a function that returns the data instead and this didn't work.

Am I missing some kind of manual import? Or do I need to vi.mock() something?

These are the most relevant solutions I could find but tried applying the solutions without success:"Non-function value encountered for default slot." in Vue 3 Composition API component

https://forum.vuejs.org/t/how-to-avoid-non-function-value-encountered-for-default-slot-warning/107039

KatieAdamsDev
  • 89
  • 9
  • 5
    The simple answer is: *"you should not worry about it"*. `` is not your code. Don't test it, ignore any warnings from it you might see in tests. The purpose of testing is to provide you with methods of checking that, following further additions to your app, the existing functionality (e.g: your app's business logic - which should not be conflated with Vue's logic), doesn't break. Trust that Vue works. Each feature/method has its own internal tests and it's not your responsibility to test or improve it. – tao Sep 30 '22 at 19:56
  • 1
    Alright, fair point. Just wondered if I'd done anything amiss so thank you for the reassurance @tao. – KatieAdamsDev Oct 10 '22 at 10:45

0 Answers0