--- title: Storybook tutorial: build and test UI components in... description: A hands-on guide to using Storybook with React to develop and test UI components in isolation. Covers installation, writing stories for multiple component... canonical: https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Storybook tutorial: build and test UI components in isolation | daily.dev og:description: A hands-on guide to using Storybook with React to develop and test UI components in isolation. Covers installation, writing stories for multiple component... og:url: https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7 og:image: https://api.daily.dev/og/posts/GSmR6zpy7.png og:image:alt: Storybook tutorial: build and test UI components in isolation og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Storybook tutorial: build and test UI components in isolation **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 8 min read · 1 upvotes · 0 comments ## Summary A hands-on guide to using Storybook with React to develop and test UI components in isolation. Covers installation, writing stories for multiple component states (loading, error, empty, long content), using controls and decorators, writing interaction tests with play functions, keyboard behavior testing, accessibility checks with the a11y addon, viewport/mobile stories, network mocking with MSW, and running stories as CI tests via the Vitest addon. Includes practical advice on which states deserve stories and how to organize story files alongside components. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I write an interaction test in Storybook using a play function? Add a play function to a story that uses canvas queries and userEvent to simulate interaction, then assert with expect. For example, query a button by role and accessible name with canvas.getByRole, click it with userEvent.click, and verify a mocked prop like onMessage was called with the expected argument using expect(args.onMessage).toHaveBeenCalledWith(...). _daily.dev surfaces practical Storybook testing patterns for developers wiring up component interaction checks._ ### How do I run Storybook stories as automated tests in CI? Install the Vitest addon with npx storybook add @storybook/addon-vitest, which turns stories into browser tests runnable via a generated script such as npm run test-storybook. This tooling uses Vitest browser mode with Playwright to render stories, so CI needs an image with the required browser installed or install it in the workflow; also run npm run build-storybook to catch missing assets or bad imports. _Developers automating UI regression checks can track Storybook and Vitest testing workflows on daily.dev._ ### How do I check accessibility issues in a Storybook component story? Install the accessibility addon with npx storybook add @storybook/addon-a11y, which adds a panel that runs automated rules against the rendered story, catching issues like insufficient color contrast, missing form labels, invalid ARIA attributes, and some heading or landmark problems. Automated checks cannot prove full accessibility, so keyboard use and screen-reader behavior still need manual testing. _daily.dev helps developers building accessible components keep up with tools like the Storybook a11y addon._ ## Similar posts on daily.dev - [Component testing: a practical guide for frontend developers](https://daily.dev/posts/component-testing-a-practical-guide-for-frontend-developers-esoc4vfzw) · Storybook · 0 upvotes · 1 comments - [How we turned Storybook into a behavioral verification engine](https://daily.dev/posts/how-we-turned-storybook-into-a-behavioral-verification-engine-itplu3dbe) · Red Hat Developer · 0 upvotes · 0 comments - [Storybook 10.4](https://daily.dev/posts/storybook-10-4-kydg7pegs) · Storybook · 88 upvotes · 4 comments --- Tags: [#react](https://daily.dev/tags/react), [#accessibility](https://daily.dev/tags/accessibility), [#storybook](https://daily.dev/tags/storybook), [#vitest](https://daily.dev/tags/vitest) [View this post on daily.dev](https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Storybook tutorial: build and test UI components in isolation","url":"https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7"},"datePublished":"2026-07-30T11:12:24.844Z","dateModified":"2026-09-14T06:16:18.237Z","description":"A hands-on guide to using Storybook with React to develop and test UI components in isolation. Covers installation, writing stories for multiple component...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/20073e07f91ac7b947f06d42c41bce86?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/20073e07f91ac7b947f06d42c41bce86?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,accessibility,storybook,vitest","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"Storybook tutorial: build and test UI components in isolation"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/storybook-tutorial-build-and-test-ui-components-in-isolation-gsmr6zpy7#faq","mainEntity":[{"@type":"Question","name":"How do I write an interaction test in Storybook using a play function?","acceptedAnswer":{"@type":"Answer","text":"Add a play function to a story that uses canvas queries and userEvent to simulate interaction, then assert with expect. For example, query a button by role and accessible name with canvas.getByRole, click it with userEvent.click, and verify a mocked prop like onMessage was called with the expected argument using expect(args.onMessage).toHaveBeenCalledWith(...). daily.dev surfaces practical Storybook testing patterns for developers wiring up component interaction checks."}},{"@type":"Question","name":"How do I run Storybook stories as automated tests in CI?","acceptedAnswer":{"@type":"Answer","text":"Install the Vitest addon with npx storybook add @storybook/addon-vitest, which turns stories into browser tests runnable via a generated script such as npm run test-storybook. This tooling uses Vitest browser mode with Playwright to render stories, so CI needs an image with the required browser installed or install it in the workflow; also run npm run build-storybook to catch missing assets or bad imports. Developers automating UI regression checks can track Storybook and Vitest testing workflows on daily.dev."}},{"@type":"Question","name":"How do I check accessibility issues in a Storybook component story?","acceptedAnswer":{"@type":"Answer","text":"Install the accessibility addon with npx storybook add @storybook/addon-a11y, which adds a panel that runs automated rules against the rendered story, catching issues like insufficient color contrast, missing form labels, invalid ARIA attributes, and some heading or landmark problems. Automated checks cannot prove full accessibility, so keyboard use and screen-reader behavior still need manual testing. daily.dev helps developers building accessible components keep up with tools like the Storybook a11y addon."}}]} ```