Anisha Malde - A Story(book) about testing - React Live 2023

React Testing

Learn how to streamline testing and development workflows using Storybook, Playwright, and Chromatic, automating testing and deployment, and achieving parity across components.

Key takeaways

Set up multiple tools and frameworks, including Storybook, Playwright, and Chromatic, to streamline testing and development workflows.
Leverage the init command to set up a new Storybook project with all dependencies included.
Use Storybook’s snapshot feature to capture and compare visual representations of components, and configure the test runner to generate coverage reports.
Integrate Storybook with existing CI/CD pipelines, such as GitHub Actions, to automate testing and deployment.
Utilize the play function to simulate user interactions and verify component behavior.
Run accessibility tests and generate reports using accessibility tools.
Generate detailed reports on any issues found during testing.
Achieve parity across components and maintain consistency by using Storybook features.
Run tests in isolation, without affecting the back-end or other components.
Use Storybook’s test runner to simplify testing and cover a wide range of testing scenarios.
Leverage the Chromatic add-on to integrate Storybook with Figma and automatically generate UI designs.
Configure Storybook to suit individual project needs, such as running specific tests or testing subsets of components.
Use the stories file to define all stories for a component, and maintain version control over component changes.
Run end-to-end tests using Cypress or Playwright to verify user interactions and component behavior.

Anisha Malde - A Story(book) about testing - React Live 2023

More talks