Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tfoxkiu opened this issue Nov 26, 2024 · 0 comments
Open

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

tfoxkiu opened this issue Nov 26, 2024 · 0 comments
Labels
bug Something isn't working needs triage

Comments

@tfoxkiu
Copy link

tfoxkiu commented Nov 26, 2024

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

@tfoxkiu tfoxkiu added bug Something isn't working needs triage labels Nov 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs triage
Projects
None yet
Development

No branches or pull requests

1 participant