`<anonymous-stub>` when running in Vitest + Vue 3 + Vue test utils `{ shallow: true }`

Issue

When using single/multiple stubs option with vue test utils it renders the whole inner html of the component, like so:

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';

import SomeComponent from './SomeComponent.vue';

test('stubs component', () => {
  const wrapper = mount(SomeComponent, {
    global: {
      stubs: {
        SomeComponent: true
      }
    }
  })

  console.log(wrapper.html())
  **Expected**
  /*
    <some-component-header-stub></some-component-header-stub>
    <h1>Welcome to Vue.js 3</h1>
  */

  **Actual**
  /*
    <div class="text-2xl font-bold">This header should be stubbed</div>
    <h1>Welcome to Vue.js 3</h1>
  */

  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
})

When using with shallow mount the children component names become anonymous-stub:

test('shallow stubs out all child components', () => {
  const wrapper = mount(ComplexComponent, {
    shallow: true
  })

  console.log(wrapper.html())
  **Expected**
  /*
    <h1>Welcome to Vue.js 3</h1>
    <complex-a-stub></complex-a-stub>
    <complex-b-stub></complex-b-stub>
    <complex-c-stub></complex-c-stub>
  */

  **Actual**
  /*
    <h1>Welcome to Vue.js 3</h1>
    <anonymous-stub></anonymous-stub>
    <anonymous-stub></anonymous-stub>
    <anonymous-stub></anonymous-stub>
  */
})

both cases are wrong, is there a way to make this work?

Use Case

When using tailwind you can catch style changes with snapshot tests. which I assume are much faster, than cypress component tests.

And you only want to see the styles of the current component under test, so as not to make tests fail when the child element styles update. to avoid flaky tests.

as a workaround you can import components directly, without using unplugin-vue-components and it works, but that obviously defeats the purpose of this plugin.

Thank you

This plugin saves a ton of time and boilerplate would be awesome to get this little bit to work 😃

I’d give it a show with a PR if you could just point me in the direction

[TadasMil]

I’m facing the same issue here

[fvanwijk]

When unplugin-vue-components is used, it is impossible to us the stubs feature of Vue Test Utils. This makes unplugin-vue-components practically unusable with Vitest.

Here is an example repo created with npm create vite@latest (vue-ts) + @testing-library/vue + vitest + unplugin-vue-components.

(It also fails with Vue Test Utils instead of Testing library)

I’m not certain this is related to the first comment but at least there seems to be anything wrong with stubbing.