✍️Testing in Storybook

Introduction

Storybook provides an environment where you can build components in isolation, and checking edge case UI states became easier with Storybook. What's more, you can write tests in Storybook. Also, testing environment comes with zero configuration. Aren't you excited? In this post, I will talk about what made me start testing in Storybook, how you can set up testing in Storybook, some issues I had with Storybook Addons.

Motivation to do testing in Storybook

jsdom in Jest cannot mock real DOM fully

React Testing Library has become a go-to option for testing React applications since you can write tests from a user perspective. Here is its core principle in their official docs.

The more your tests resemble the way your software is used, the more confidence they can give you.

So I tried Jest/React-Testing-Libary and was quite satisfied with these technologies. However, I got stuck when I tried to test Dialog element. It turns out there are some known limitations with jsdom. Since jsdom is not real DOM, I came across a situation in which I can't test the element in the way it is used by users.

Finding Alternatives

Another javascript-implemented DOM

• happydom: It's another javascript implementation of DOM. However, its community is way smaller than jsdom. The repository has 2.9k+ stars, so I can't make sure that I would get a huge community support.

Using real DOM

• real DOM: jsdom lets us see the result of component testing immediately in the local development environment whenever our codebase changes. That's one of the important part of automated testing. Once we start using real DOM, it's clear that the execution time of testing will be too slow.

Innovative Solution

• When you develop in local development, you typically run yarn storybook and see the result. Since Storybook already renders stories(components) in real DOM, it can reuse the rendered components to run component testing. According to Storybook's Benchmark, Storybook interaction testing is 30% slower than jest/react-testing-library and sometimes it is even faster. Internally, Storybook uses jest/playwright to run the tests.

• In addition, it becomes easier to track down bugs since you can see the interaction flow visually in Storybook, rather than seeing the dumped HTML when the test fails. Debugging is made easier.

• Storybook's testing methods are similar to those of Jest/React-Testing-Library, so it was clear that I would get used to it easily.

How to set up

Test Runner

1. Install test runner

   yarn add --dev @storybook/test-runner
   

2. Run the test-runner

   yarn test-storybook
   

Interaction Testing

1. Add this to config of your ./storybook/main.ts

   const config: StorybookConfig = {
     addons: [
       '@storybook/addon-interactions',
       ...,
     ],
   }
   

2. Write an interaction test.

   // More on interaction testing: 
   // https://storybook.js.org/docs/writing-tests/interaction-testing
   export const LoggedIn: Story = {
     play: async ({ canvasElement }) => {
       const canvas = within(canvasElement);
       const loginButton = canvas.getByRole("button", { name: /Log in/i });
       await expect(loginButton).toBeInTheDocument();
       await userEvent.click(loginButton);
       await expect(loginButton).not.toBeInTheDocument();
   
       const logoutButton = canvas.getByRole("button", { name: /Log out/i });
       await expect(logoutButton).toBeInTheDocument();
     },
   };
   

• play: this function runs after the story finishes rendering.
• click: Storybook lets you use user-events in the same way as Reac Testing Library.
• expect: assertion function

Test Coverage

Test coverage shows any code lines that tests haven't gone through.

1. Install the addon.

   yarn add --dev @storybook/addon-coverage
   

2. Include the addon in main.ts

   const config: StorybookConfig = {
     addons: [
       '@storybook/addon-coverage', 
       ...,
     ],
   };
   

3. Run the test runner with --coverage option.

   yarn test-storybook --coverage
   

End-to-end Testing

You can navigate to the URL of storybook and do end-to-end testing straight up.

import { Frame } from "@playwright/test";
import { test, expect } from "./test";

let frame: Frame;

test.beforeEach(async ({ page }) => {
  await page.goto(
    "http://localhost:6006/?path=/story/example-page--logged-out"
  );
  await expect(page.getByTitle("storybook-preview-iframe")).toBeVisible();
  frame = page.frame({ url: /http:\/\/localhost:6006\/iframe.html/ })!;
  await expect(frame).not.toBeNull();
});

test("has logout button", async ({ page }) => {
  const loginButton = frame.getByRole("button", { name: /John/i }).first();
  await expect(loginButton).toBeVisible();
  await loginButton.click();

  await expect(
    frame.getByRole("button", {
      name: /John/i,
    })
  ).toBeVisible();
});

API Mocking

1. Install the addon.

   yarn add msw msw-storybook-addon --dev
   

2. Generate service worker to your public directory.

   yarn msw init public/
   

3. Include the addon in .storybook/preview.ts

   import { initialize, mswLoader } from 'msw-storybook-addon'
   // Initialize MSW
   initialize()
   const preview = {
   parameters: {
   // your other code...
   },
   // Provide the MSW addon loader globally
   loaders: [mswLoader],
   }
   export default preview
   

4. Open your storybook URL(http:localhost:6006) and check browser devtools > console tab. If MSW is enabled in your browser, you'll be able to see this log.

   

   

5. You can also see the following log in the console tab if the request was intercepted by MSW.

   

Issues

yarn test-storybook --coverageis not printing the coverage result on console

Description

You can see that all the tests passed, but the coverage result is not displayed. This is a known issue.

Workaround

1. Install nyc as a dev dependency. yarn add nyc --dev

2. Run this command instead.

   test-storybook --coverage --coverageDirectory coverage && nyc report --reporter=text -t coverage
   

   nyc prints the result on console. This time we tell nyc where to pick up the coverage report file(./coverage).

Troubleshooting

Testing Storybook-rendered iframe in Playwright

Let's say you wrote a end-to-end test to see if the following application flow works.

1. A page renders log-in button.
2. User clicks log-in button.
3. log-out button is renders.

This is the first version of the test using the rendered component in storybook.

test("it has logout button", async ({ page }) => {
  // navigate to the Stroybook component url
  await page.goto(
    "http://localhost:6006/?path=/story/example-page--logged-out",
  );

  // query log-in button element
  const loginButton = page.getByRole("button", { name: /log in/i });
  // fire click event
  await loginButton.click();
  // query log-out button element
  const logoutButton = page.getByRole("button", { name: /log out/i });
  // assert log-out button is rendered
  await expect(logoutButton).toBeVisible();
});

Here's the result of the test.

• Problem: await page.goto() only waits for the navigation of the document of the main frame, so it doesn't wait for subframe generated by <iframe/> to render. Let's fix this issue.

test("it has logout button", async ({ page }) => {
  // navigate to the Stroybook component url
  await page.goto(
    "http://localhost:6006/?path=/story/example-page--logged-out",
  );

  // wait for subframe to load
  await expect(page.getByTitle("storybook-preview-iframe")).toBeVisible();
  const frame = page.frame({ url: /http:\/\/localhost:6006\/iframe.html/ })!;

  // query log-in button element
  const loginButton = page.getByRole("button", { name: /log in/i });
  // fire click event
  await loginButton.click();
  // query log-out button element
  const logoutButton = page.getByRole("button", { name: /log out/i });
  // assert log-out button is rendered
  await expect(logoutButton).toBeVisible();
});

• Problem: it's still impossible to query elements since loginButton and logoutButton is in the subframe. We need to query on the document of the subframe.

test("it has logout button", async ({ page }) => {
  // navigate to the Stroybook component url
  await page.goto(
    "http://localhost:6006/?path=/story/example-page--logged-out",
  );

  // wait for subframe to load
  await expect(page.getByTitle("storybook-preview-iframe")).toBeVisible();
  const frame = page.frame({ url: /http:\/\/localhost:6006\/iframe.html/ })!;

  // query log-in button element
  const loginButton = frame.getByRole("button", { name: /log in/i });
  // fire click event
  await loginButton.click();
  // query log-out button element
  const logoutButton = frame.getByRole("button", { name: /log out/i });
  // assert log-out button is rendered
  await expect(logoutButton).toBeVisible();
});

Now the test succeeds!

References

• How to know what to test
• Setting test runner in Storybook
• Unit testing in Storybook
• Visual testing in Storybook
• Interaction testing in Storybook
• Test coverage in Storybook
• End-to-end testing in Storybook
• Integrate MSW and Storybook