Storybook Crash Course for developers - React/Vitest

Discover how to get started with Storybook by creating a project, exploring its interface, writing your first stories, and learning about parameters, documents, and multiple component rendering.

Create a basic Vite React TypeScript project, install Storybook with npm create storybook, enable onboarding with Playwright, and explore Storybook configuration and sample stories in .storybook.

Explore the Storybook interface and start the process with npm run storybook to view components and stories. Navigate the navigator, adjust properties with controls, and inspect actions, interactions, and tests.

Create a simple tag component in src with a string text prop, export it, and add a corresponding tag.stories.tsx using storybook react-vite types.

Extend the dump story by adding a color prop with a default orange value via destructuring, then visualize changes in Storybook with color controls and pink and orange stories.

Explore how to use Storybook parameters to finely tune the experience, configuring global parameters in preview.ts and per-story backgrounds like yellow, gray, and blue.

Explore rendering multiple components side by side in Storybook using a render function, add a multiple story with a gap control, and experiment with flex layout and story arguments.

Learn how to generate and view documentation in Storybook by adding an Autodocs tag to meta, exposing component props, types, and jsdoc comments, and rendering on-the-fly documentation for stories.

Explore the basics of Storybook by creating a project, navigating the interface, writing first stories, and learning about parameters, documents, and multiple component rendering.

Explore testing with Storybook by examining a blog post component featuring a title, content, and tag management using useState, including add and remove tag via onTagAdded and onTagRemoved.

Learn to write your first storybook interaction test for a post component, using default arguments in meta, rendering initial tags with the play function, and verifying with vitest.

Learn how to locate elements in Storybook tests using testing library, by role or text, and understand get by versus query by for robust React/Vitest UI tests.

Demonstrate testing a delete tag action by locating the delete button, simulating a user click, and verifying the tag is removed from the document.

Test function calls in Storybook by using a mock fnImport to verify onTagRemoved is invoked with the correct tag text when deleting a tag in the post component.

Test a Storybook post component's add tag action by typing in the add tag input, clicking add, and asserting the new tag appears and the on tag added callback fires.

Install the storybook add-on test code gen with npx, then use the interaction recorder to generate tests on the fly and save generated stories for quick testing.

Explore headed mode in storybook and vitest to run tests with a browser interface, enable watching, and filter, rerun, and view test results in real time.

Explore Storybook testing with accessibility, visual, and interaction tests; see how accessibility flags contrast issues, Chromatic snapshots component states, and tests in the browser reveal failures.

Learn to mock function calls in Storybook, using getRandomName to render a controlled name. The module shows configuring mocks in preview.ts and returning a fixed value for reliable tests.

Develop and test a data-fetching component by mocking network requests with Storybook and the mock service worker, covering loading, error, and varied product data scenarios.

Install mock service worker and storybook add-on, initialize msw, register the public folder, and enable msw in preview.ts to mock api calls and verify with a log.

Learn to mock network requests with MockServiceWorker using a product response type in TypeScript, create MSW handlers for success, error, and loading states in Storybook.

Explore how to edit your Storybook experience by using add-ons, link Figma designs with the design add-on, and theme Storybook to match your company site.

Explore how add-ons extend Storybook, distinguish core and community add-ons, and learn to install and register them with npm or npx and update main.ts.

Learn how to use the storybook design add-on to embed images, iframes, websites, and Figma designs directly in the panel, and install and register the add-on in your project.

Learn how to customize Storybook's user interface by creating a custom theme with manager.ts and a cooltheme.ts, then configure colors, fonts, and branding to match your site.

Celebrate completing this Storybook crash course and review the essential features covered; explore more to learn and experiment with Storybook, and check the next lecture for links to other courses.