# Test storybook stories in Vitest + React testing library

Let's say you have these files:

- `Chat.tsx`
- `Chat.stories.tsx`
- `Chat.test.tsx`

The test file can be written to use Storybook stories:

```typescript
import { describe, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import * as stories from './Chat.stories'

const Component = stories.default.component

// Example: making assertions on certain stories
describe('story: Primary', () => {
  it('render with assertions', () => {
    const story = stories.Primary

    render(<Component {...story.args} />)

    // Check at least one chat message exists
    const chatMessages = screen.getAllByRole('article', { hidden: true })
    expect(chatMessages.length).toBeGreaterThan(0)
  })
})


// Example: render storybook stories via React testing-library
describe('all stories', () => {
  const storyEntries = Object.entries(stories).filter(
    ([key, story]) =>
      typeof story === 'object' && key !== 'default' && 'args' in story
  )

  it.each(storyEntries)(
    'renders %s story without errors',
    (_storyName, story) => {
      if (!('args' in story)) throw new Error('Invariant')

      render(<Component {...story.args} />)
    }
  )
})
```

## Why

- Storybook stories can act like _smoke tests_. Tests will fail if there are any stories that emit errors on render.
- Test stories can be inspected visually in Storybook.

## Also see

- [Vitest browser mode](https://vitest.dev/guide/browser/) takes this idea one step further and removes the need for Storybook (at least for this use case).