Skip to content

[Bug]: Vitest plugin not using Vue slots defined in args #517

Open
@tfoxkiu

Description

@tfoxkiu

Describe the bug

When using Vitest plugin in a Vue Storybook, the stories rendered in Vitest doesn't have the passed slots.

Story:

Image

Vitest:

Image

To Reproduce

TestButton.vue

<script setup></script>

<template>
  <button>Slot: <slot /></button>
</template>

TestButton.stories.js

import { h } from 'vue'
import TestButton from './TestButton.vue'
import { expect } from '@storybook/test'

export default {
  component: TestButton
}

export const TextSlot = {
  args: {
    default: 'Primary'
  },
  play: async ({ args, canvasElement }) => {
    await expect(canvasElement.textContent).toContain(args.default)
  }
}

export const FunctionSlot = {
  args: {
    default: () => h('span', 'Primary')
  },
  play: async ({ canvasElement }) => {
    await expect(canvasElement.textContent).toContain('Primary')
  }
}

Configuration of Storybook is the standard one.

Full repro repo: https://github.com/tfoxkiu/storybook-vitest-vue-slots

System

Storybook Environment Info:

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 AMD Ryzen 5 5500
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.16.0 - ~/.local/share/mise/installs/node/20.16.0/bin/node
    npm: 10.8.1 - ~/.local/share/mise/installs/node/20.16.0/bin/npm <----- active
  Browsers:
    Chrome: 131.0.6778.69
  npmPackages:
    @storybook/addon-essentials: ^8.4.5 => 8.4.5 
    @storybook/experimental-addon-test: ^8.4.5 => 8.4.5 
    @storybook/test: ^8.4.5 => 8.4.5 
    @storybook/vue3: ^8.4.5 => 8.4.5 
    @storybook/vue3-vite: ^8.4.5 => 8.4.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    msw-storybook-addon: ^2.0.4 => 2.0.4 
    storybook: ^8.4.5 => 8.4.5

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions