Slots are not working

[os-tohe]

When rendering slots, it throws this error:

SyntaxError: "prefixIdentifiers" option is not supported in this build of compiler.
 - /node_modules/.vite/deps/vitest-browser-vue.js:6404:30
 - /node_modules/.vite/deps/vitest-browser-vue.js:6706:20
 - /node_modules/.vite/deps/vitest-browser-vue.js:6722:21
 - /node_modules/.vite/deps/vitest-browser-vue.js:6711:122
 - /node_modules/.vite/deps/vitest-browser-vue.js:6890:16
 - /node_modules/.vite/deps/vitest-browser-vue.js:7034:47

I am testing with this setup:

TestComponent.vue

<template>
  <div>
    <div>Hello World</div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts"></script>

TestComponent.browser.test.ts

import { render } from 'vitest-browser-vue';
import TestComponent from './TestComponent.vue';

describe('TestComponent', () => {
  test('Rendering slot', () => {
    render(TestComponent, {
      slots: {
        default: 'Test',
      },
    });
  });
});

---

While writing this issue I finally found a way which works:

default: () => 'Test'

So I needed to transform it into a function. Is this a bug or is this supposed to work like this? If this is not a bug then there should be some instructions on your documentation how to use the slots, since the slot declarations which are written in Vue Test Utils documentation do not work.

[gu-stav]

I stumbled upon this issue too and tried adding a new testcase to the repository:

test/fixtures/Slot.vue

<template>
    <slot />
    <slot name="footer" />
</template>

test('renders comonent with slot', async () => {
  render(Slot, {
    slots: {
      default: 'Default',
      footer: 'Footer',
    },
  })

  await expect.element(page.getByText('Default')).toBeVisible()
  await expect.element(page.getByText('Footer')).toBeVisible()
})

Which passes. As soon as I add this to our vitest browser testsuite at fails, with the same error reported above. 🤔

[sheremet-va]

Vue testing ecosystem relies a lot on Node.js and CJS development condition for this type of thing. I am not sure how to fix this on our side yet, but for now you can add this to your aliases and it should fix it:

test: {
  alias: {
    '@vue/compiler-core': require.resolve('@vue/compiler-core'),
  },
}