Niamh McCooey - A Beginner’s Guide To Storybook - JSWORLD 2023

Testing Automation

Learn how to get started with Storybook, a front-end tool for building and maintaining components in isolation, and discover its features, including theme switching, automation testing, and integration with Chromatic and other tools.

Key takeaways

Storybook is a front-end tool for building and maintaining components in isolation.
To create a Storybook, you need to run npx sb init and then npm run storybook to start the server.
Storybook lets you see every component on its own in the browser, with props and states highlighted.
You can pass values to a component’s props by creating an args object and exporting it with the primary named export.
You can also create theme switching tool in the Storybook UI by creating a theme provider and passing the theme prop to it.
Chromatic is a tool chain that helps ship high-quality UI components by running visual regression tests and enabling UI reviews.
To integrate Chromatic with Storybook, you need to add your Chromatic project token to your GitHub secrets and create a Chromatic deployment.
Storybook also allows you to automate UI testing with tools like Cypress, and you can integrate it with your CI/CD workflow.
Props are function arguments that can be passed to a component, and you can use them to customize the component’s behavior.
When you create a component story, you can pass props to it by creating an args object and exporting it with the primary named export.
Storybook also provides a sidebar where you can see the component’s state and props, and you can use the controls panel to play around with the component’s props.
Storybook is open-source and has a large community of developers, with plenty of documentation and resources available.
You can customize Storybook by adding plugins and add-ons, and you can also integrate it with other tools like TypeScript and Webpack.

Niamh McCooey - A Beginner’s Guide To Storybook - JSWORLD 2023

More talks