MyComponents.spec.tsx

import { ReactRenderer, StoryObj } from '@storybook/react'
import { ComponentAnnotations } from '@storybook/types'

import { describeStories } from './tiniest-storybook-test-suites'

import * as stories from './MyComponent.stories'

describeStories(stories)

tiniest-storybook-test-suites.tsx

function describeStories<TProps>(
  stories: { default: ComponentAnnotations<ReactRenderer, TProps> } & { [K in string]: StoryObj<TProps> },
  wrapper: (element: ReactElement) => RenderResult,
) {
  describe(stories.default.component?.displayName!, () => {
    for (const key of Object.keys(stories)) {
      if (key === 'default') continue
      const { play, render } = stories[key]
      if (!render || !play) continue

      it(`${key} story plays out`, async () => {
        const root = wrapper(render({} as any, {} as any))
        await play({
          ...stories.default,
          canvasElement: root.baseElement,
        } as any)
      })
    }
  })
}