Testing in Storybook self-help notes!

These are my self notes, while exploring testing with storybook

Currently, we write two files along with the main component file, one is for the storybook i.e. *.stories.tsx and the other is for testing *.spec.tsx

Storybook advocates, that we can write specs also inside stories files, thus putting all meta code in one story file also, when we write tests in storybook, we are testing with actual dom as opposed to jest-dom when using testing library

Storybook Testing handbook

play function, test-runner, and assertion library(jest) is part of testing in Storybook.

Test component interactions with Storybook
this is a very good blog, explains setting up test runner, automating test in ci, and writing interaction test to verify user behavior

some more links for learning interaction testing with storybook

Interaction Testing with Storybook

Interaction tests

Storyshot

We can also do snapshot testing with storybook, there is an addon for it, known as storyshots

Storyshots Addon | Storybook: Frontend workshop for UI development
https://yarnpkg.com/package/@storybook/addon-storyshots

Storyshots a powerful side of Storybook to Visual Test React Components

When should we use Storyshots? · storybookjs/storybook · Discussion #18119

– seems like interaction testing is preferred over storyshot, but storyshot is an easier way to increase code coverage

READ how to use storyshot without enzyme, because they want to use react-testing-library

Using react-testing-library with storyshots?

Following is very useful medium post which explains the use of cypress with storybook, rather than writing snapshot tests with jest

Testing React Components using Storybook and Cypress

MSW can be used to mock network calls used for unit testing components which fetch data over network

Mock Service Worker Addon | Storybook: Frontend workshop for UI development

Introduction

[React] Unit Testing APIs with Mock Service Worker (MSW)

We can also know about the percentage of code coverage through tests added in stories file

Code coverage with Storybook test runner

GitHub — storybookjs/test-runner at storybookblog.ghost.io

extra things to ponder about testing

Pricing — Codecov

Things to add.

how to setup storybook in CI

Chromatic deployment