Nuxt 3 × Storybook 8 × Vitestでインタラクションテストを実行する

npx storybook add @storybook/experimental-addon-test

$ npm install --save-dev unplugin-auto-import unplugin-vue-components

// vitest.workspace.ts
import AutoImportFunctions from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'

export default defineWorkspace([
  'vitest.config.ts',
  {
    extends: 'vite.config.ts',
    plugins: [
      storybookTest({ configDir: '.storybook' }),
      storybookVuePlugin(),
      // 以下を追加します。
      AutoImportFunctions ({ imports: [
        'vue',
        'vee-validate',
        'vue-router',
        'pinia',
      ], dts: '.storybook/auto-imports.d.ts',
      }),
      // 以下を追加します。
      AutoImportComponents({
        dirs: ['components'],
        dts: '.storybook/components.d.ts',
      }),
    ],

"scripts": {
  "test:storybook": "vitest --project=storybook",
},

// components/Button.vue
<template>
  <button>ボタン</button>
</template>

// pages/index.vue
<script lang="ts" setup>
const isClicked = ref(false)
const handleClick = () => {
  isClicked.value = true
}
</script>
<template>
  <Button @click="handleClick" />
  <p v-if="isClicked">
    Clicked!
  </p>
</template>

// pages/index.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3'
import Index from './index.vue'
import { within, userEvent, expect } from '@storybook/test'

type Story = StoryObj<typeof Index>
const meta: Meta<typeof Index> = {
  title: 'Index',
}

export const ClickButton: Story = {
  render: () => ({
    components: { Index },
    template: '<Index />',
  }),
  // インタラクションテストの実装
  play: async ({ canvasElement }) => {
    // Arrange
    const canvas = within(canvasElement)

    // Act
    await userEvent.click(canvas.getByText('ボタン'))

    // Assert
    await expect(canvas.getByText('Clicked!')).toBeInTheDocument()
  },
}

export default meta

$ npm run test:storybook
> test:storybook
> vitest --project=storybook
 ✓ |storybook| src/pages/index.stories.ts (1)
   ✓ Click Button
 Test Files  1 passed (1)
      Tests  1 passed (1)

$ npm run storybook