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

1. Run the test-runner

yarn test-storybook

Unit Testing

Interaction Testing

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

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

1. Write an interaction test.

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testingexport 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

1. Include the addon in main.ts

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

1. 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

1. Generate service worker to your public directory.

yarn msw init public/

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

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

1. 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.

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

More to write

• Issues
• Issues with Storybook Addon Coverage
• Issues with Playwright
• Limitations

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