rstacruz · April 7, 2025 02:03 · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025
diff --git a/gistfile1.md b/gistfile1.md
@@ -15,6 +15,20 @@ 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(
@@ -31,19 +45,6 @@ describe('all stories', () => {
     }
   )
 })
-
-// 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)
-  })
-})
 ```
 
 ## Why

diff --git a/gistfile1.md b/gistfile1.md
@@ -53,4 +53,4 @@ describe('story: Primary', () => {
 
 ## Also see
 
-- [Vitest browser mode](https://vitest.dev/guide/browser/) takes this idea one step further and removes the need for Storybook.
+- [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).
diff --git a/gistfile1.md b/gistfile1.md
@@ -49,4 +49,8 @@ describe('story: Primary', () => {
 ## 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.
+- 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.
diff --git a/gistfile1.md b/gistfile1.md
@@ -2,11 +2,11 @@
 
 Let's say you have these files:
 
-- `ChatApp.tsx`
-- `ChatApp.stories.tsx`
-- `ChatApp.test.tsx`
+- `Chat.tsx`
+- `Chat.stories.tsx`
+- `Chat.test.tsx`
 
-These can be used in the test file:
+The test file can be written to use Storybook stories:
 
 ```typescript
 import { describe, it } from 'vitest'
@@ -15,7 +15,7 @@ import * as stories from './Chat.stories'
 
 const Component = stories.default.component
 
-// Render storybook stories via React testing-library
+// Example: render storybook stories via React testing-library
 describe('all stories', () => {
   const storyEntries = Object.entries(stories).filter(
     ([key, story]) =>
@@ -44,4 +44,9 @@ describe('story: Primary', () => {
     expect(chatMessages.length).toBeGreaterThan(0)
   })
 })
-```
+```
+
+## 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.
diff --git a/gistfile1.md b/gistfile1.md
@@ -1,9 +1,17 @@
 # Test storybook stories in Vitest + React testing library
 
+Let's say you have these files:
+
+- `ChatApp.tsx`
+- `ChatApp.stories.tsx`
+- `ChatApp.test.tsx`
+
+These can be used in the test file:
+
 ```typescript
 import { describe, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import * as stories from './ChatApp.stories'
+import * as stories from './Chat.stories'
 
 const Component = stories.default.component
 

diff --git a/gistfile1.txt → gistfile1.md b/gistfile1.txt → gistfile1.md
@@ -1,3 +1,5 @@
+# Test storybook stories in Vitest + React testing library
+
 ```typescript
 import { describe, it } from 'vitest'
 import { render, screen } from '@testing-library/react'

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,37 @@
+```typescript
+import { describe, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import * as stories from './ChatApp.stories'
+
+const Component = stories.default.component
+
+// 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} />)
+    }
+  )
+})
+
+// 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)
+  })
+})
+```