Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

In order to avoid having to manually check every story and their interactions after every change we make, Storybook provides a 

 which turns every story into tests, and executes these tests in a headless browser, powered by 

First, stop Storybook if it's running. Then, install the test runner:

The test runner needs Storybook to be running, so let's run it again:

Now all you have to do is run the following command in a separate terminal, while Storybook is running:

The test runner will visit every single story, and for simple stories that don't have interactions, it will smoke test them, checking whether they render correctly. For the ones with interactions, it will execute the play function and check whether the assertions will succeed! 

---
title: How to Automate Storybook Testing With Test Runner
slug: storybook-test-runner
description: Let's use the Storybook test runner to automate our tests!
privateVideoUrl: https://fullstack.wistia.com/medias/0cak9cyoqs
isPublicLesson: false
---

In order to avoid having to manually check every story and their interactions after every change we make, Storybook provides a [test runner](https://github.com/storybookjs/test-runner) which turns every story into tests, and executes these tests in a headless browser, powered by [Playwright](https://playwright.dev/). Let's set it up!

First, stop Storybook if it's running. Then, install the test runner:

```sh
yarn add -D @storybook/test-runner
```

The test runner needs Storybook to be running, so let's run it again:

    yarn storybook

Now all you have to do is run the following command in a separate terminal, while Storybook is running:

```sh
yarn test-storybook
```

The test runner will visit every single story, and for simple stories that don't have interactions, it will smoke test them, checking whether they render correctly. For the ones with interactions, it will execute the play function and check whether the assertions will succeed! 

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/tests-passing.png)

Upon failure, it will present the error message in the CLI, with a link that opens Storybook in the failed story, having the interactions panel open! You can run the tests in watch mode to only run against files we changed in this lesson:

Yann Braga

In order to avoid having to manually check every story and their interactions

Storybook provides a test runner which turns every single story into tests.

And the features are every story that does not have play functions will just be

so if it renders correctly then the test will pass.

And for the stories that contain with play function,

the test runner will execute the play function and check whether the assertion

And all of the tests they run in parallel in a headless browser,

which means that you're running tests against a real browser.

And because it uses just and playwright, you get both the power and flexibility

And that means that you can run tests in parallel, you can reuse watch mode,

and you can even do cross browser testing if you want it.

So let's go ahead and add it to our project.

The first thing we have to do is essentially just to install it.

So yarn add Storybook test runner as a dev dependency.

So we go here, we kill storybook because we need to install new dependencies

And once we're done, the test runner actually needs storybook to be running.

And this time let's pass a flag -ci so that storybook doesn't open a browser

And once storybook is running, we open a new instance of the terminal

and then we essentially just need to run yarn test - storybook.

And that's going to execute the binary that comes from the library.

So just by doing this, it's enough for this test runner to visit every single

and check whether they're passing or not.

In this case, we see that everything is passing.

And because the test runner is based on just, we can run yarn test storybook -

to check only for the changes that we are making.

So for example, let's just force a failure in one of the tests that we have.

So let's open the restaurant card and then change this to to have been called.

Because we're running in watch mode, as you can see, there's only one test

And then over here, we're going to get the feedback from the restaurant card in

And not only we get the feedback from the CLI which is the original test error,

but also we get this link which if you click, you can debug directly in the

So basically we get the nice experience from the CLI, but also connecting to a

So basically we can just fix our interaction and then the tests are passing in.

You see how simple it is now to test every single one of our stories.

And now we can be pretty much confident that every change that we make as long

are part of a story, then they will be running correctly.

So for instance, if we ever update any library that ends up breaking a

If we change the API of a component but forgot to update in storybook,

If a bug is introduced in the restaurant detail page and the model doesn't open

for some reason, because of the story that we created in the previous lesson,

And you can do so much more with the test runner and you can get more

You can configure as much as you like and there are different modes and you can

Additionally, you can also run your tests against Chrome, Firefox, Safari and

With the combination from the interactions and the test runner,

you don't really need to write tests for your component in node anymore.

You can just get this full experience in storybook and playwright.

And the test runner has experimental test hooks that we can execute anything

such as snapshot tests or accessibility tests,

which we'll be talking about in the next lesson.