UI Testing Handbook
  • Introduction
  • Visual
  • Composition
  • Interaction
  • Accessibility
  • User flow
  • Automate
  • Workflow
  • Conclusion
Framework:
React

Conclusion

Get more done by doing less

Developers spend 21% of their time fixing bugs. Tests help reduce the amount of work you have to do by catching defects and speeding up debugging. But every new feature introduces more UI and states that need tests. The only way to stay productive is to implement an intuitive testing workflow.

Start by writing test cases as stories. You can reuse them in testing tools such as Jest, Chromatic and Axe. Studies suggest that reusing code can shave 42-81% off dev time.

During development, test while you code to get a fast feedback loop and catch bugs before hitting production. It's 10x more expensive to fix bugs in production!

PR checks for all types of UI testing: visual, interaction, accessibility, composition and user flows

Finally, use a CI server to run all your checks across the entire UI to prevent accidental regressions. Research-backed studies from Microsoft suggest that you can see a 20.9% reduction in defects with automated testing.

When your tests pass, you’ll have confidence that your UI is bug-free.

I hope condensing these learnings into a pragmatic workflow helps you implement a solid testing strategy of your own. Let this be your starting point.

Sample code for this tutorial

If you've been coding along, your repository and deployed Storybook should look like this:

More resources

Want more? Here are some additional helpful resources:

  • Visual Testing Handbook is an in-depth guide to testing UI appearance—with learnings from leading engineering teams like BBC, Adobe, Target and more.
  • How to test UIs with Storybook details how you can use Storybook for UI testing.
  • Discord chat puts you in contact with the Storybook community and maintainers.
  • Blog showcases the latest releases and features to streamline your UI development workflow.

Thanks for learning with us. Subscribe to the Storybook mailing list to get notified when helpful articles and guides like this are published.

Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify