Vitest Warning When Testing a Component

[vmw1902]

Right now I'm attempting to write unit tests for an application I'm working on. After setting up and running tests for one of my views, which has a component that utilizes w-tooltip, my tests all pass but I get the following warning in the terminal:

[Vue warn]: Failed to resolve component: w-tooltip If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Is there something I need to do configuration-wise with Vitest to account for the WaveUI components? I could just stub them out, but I wanted to know if there was another option.

[vmw1902]

For anyone else, I found that you need to do a combination of two things to avoid having errors or warnings in your vitests. The first step was to update the vitest config to include a server attribute in the test object. Ex:

defineConfig({
    test: {
      server: {
        deps: {
          inline: ['/wave-ui/']
        },
       ...Other Settings
      }
    }
  })

The next step was to ensure that anywhere where I'm using a waveUI component as a native custom element, to physically import the component from the library Ex: (SomethingCool.vue)

<template>
     <w-tooltip>...</w-tooltip>
 </template>
 <script setup lang="ts">
 import { WTooltip } from 'wave-ui/src/wave-ui/components'
 </script>

[antoniandre]

Brilliant, thanks for sharing @vmw1902!