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

We have tackled most of the configuration required to render the 

 component. What is left to do is proxy the server requests with 

 so that we don't make calls to the real backend, and manipulate the response so that we can force different scenarios of our page. The installation steps and basic usage were already covered in the 

 lesson, so make sure to check it out if you've missed it.

Let's first recap and identify the states of our page, which are:

The next step is to identify which request we are trying to mock. The component fetches data using a URL that comes from a constant in 

export const BASE_URL = 'https://mealdrop.netlify.app/.netlify/functions/restaurants'

Given that info, essentially, we need to use MSW to listen to that URL and add different handlers per story so that we can reproduce every one of the scenarios for our page.

src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx

 file and start defining the scenarios. MSW will help us to easily define each one.

The first scenario we should implement is the default, where the API request successfully returns data. We then use the mock data from the stubs in the MSW handler:

// src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
// ...other imports
import { rest } from 'msw'

import { BASE_URL } from '../../api'
import { restaurants } from '../../stub/restaurants'

// ...rest of the code

Success.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/proto/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510&scaling=scale-down-width&page-id=135%3A257&starting-point-node-id=135%3A258',
  },
  msw: {
    handlers: [
      rest.get(BASE_URL, (req, res, ctx) => {
        return res(ctx.json(restaurants[0]))
      }),
    ],
  },
}

---
title: How to Mock Storybook App Loading Scenarios With MSW
slug: adding-the-restaurant-detail-page-mocking-requests
description: Let's mock the API scenarios with MSW.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/j7s3m5smyr
isPublicLesson: false
---

## Data fetching

We have tackled most of the configuration required to render the `RestaurantDetailPage` component. What is left to do is proxy the server requests with [MSW](https://mswjs.io/) so that we don't make calls to the real backend, and manipulate the response so that we can force different scenarios of our page. The installation steps and basic usage were already covered in the [Data Fetching: Mocking Requests](./data-fetching-mocking-requests) lesson, so make sure to check it out if you've missed it.

Let's first recap and identify the states of our page, which are:

-   **Success**: The page renders correctly with the restaurant information (already covered in the previous lesson)
-   **Loading**: While the page is loading, a spinner is presented
-   **Error - Not found**: If the server responds with a status 404, the "not found" screen is presented
-   **Error - Server error**: If the server responds with a status 500, the "error" screen is presented

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.05/public/assets/restaurant-detail-page-scenarios.png)

The next step is to identify which request we are trying to mock. The component fetches data using a URL that comes from a constant in `src/api/index.ts`:

```ts
export const BASE_URL = 'https://mealdrop.netlify.app/.netlify/functions/restaurants'
```

Given that info, essentially, we need to use MSW to listen to that URL and add different handlers per story so that we can reproduce every one of the scenarios for our page.

## Defining the scenarios

Let's open the `src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx` file and start defining the scenarios. MSW will help us to easily define each one.

### Success

The first scenario we should implement is the default, where the API request successfully returns data. We then use the mock data from the stubs in the MSW handler:

```tsx
// src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
// ...other imports
import { rest } from 'msw'

import { BASE_URL } from '../../api'
import { restaurants } from '../../stub/restaurants'

// ...rest of the code

Success.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/proto/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510&scaling=scale-down-width&page-id=135%3A257&starting-point-node-id=135%3A258',
  },
  msw: {
    handlers: [
      rest.get(BASE_URL, (req, res, ctx) => {
        return res(ctx.json(restaurants[0]))
      }),
    ],
  },
}
```

Yann Braga

Alright, now it's time to add the loading error in 404 scenarios to our stories

So let's go back to the Storycode and we learned from previous lessons that we

So what we can do here is, first of all, we need to import a REST operator from

We also need to import a base URL from the API, which is two levels above.

And lastly, we need to import from stubs, we need to get the restaurant's mock

So once we have all of these necessary pieces, we can go under the success

a new parameter, which is a sw and the MSW receives a property called handlers,

And then we call rest dot get, which is the operation we want to mock with the

that we're passing, and then this receives a callback, which is going to

And then that essentially returns a response with a context dot JSON of our

So when we check Storybook, it's actually just rendering the mock data.

Regardless, if we refresh the browser, it's not going to fetch any data.

And if we look into the implementation of the restaurant detail page, we're

But we've also got a loading scenario, a 404 and 500.

So let's use the mock service worker to also reach all of these scenarios as

And because I don't want to be typing too much, I'm just going to paste the

So we have a loading story, which has its own design.

And it's got a mock service worker, which is using context dot delay with the

And that essentially will never resolve the request, which is being sent.

And then we've got not found, which is using context dot status, passing the

And then the error one, which is context dot status 500.

So if we look back into our storybook, we have all of these different states

We have the loading state, which is actually really good to have a story

We've got to not found, which is showing this animation.

And then we've got the error, which is also showing an animation.

Because we've added support for a bunch of functionality along the way, adding

or page to storybook will be a piece of cake.

This is the last component we'll be adding to storybook in this course.

And as an exercise, you can add other components or even create new ones from

You can always refer to the meal drop repository to see a complete storybook

And hopefully, you can use it as a showcase for your colleagues to show all the

value that storybook can bring to your project.

In fact, there's even more testing value, which we'll be talking about in the