Testing for Storybook
This repo aims to test the Interaction Testing with Storybook. To see if we can leverage this built-in feature to test our UI library.
I would like to test our UI library with Storybook Interaction Testing.
The reasons are:
- We are using Storybook. The Interaction feature is amazing.
- We can play the Interactions in our Storybook directly.
- Once we are done writing the
playfunction to enable Interaction. We are almost done for writing the Interaction Testing.
- The experience of writing Interaction Testing is almost the same as writing Testing Library.
The risks would be:
- Storybook Interaction Testing is in the early stage.
- We couldn’t collect the testing coverage of Interaction Tests.
- What if we want to leave Storybook? We will have to unbind our tests with stories.
Is it possible to minimize the risks?
It’s possible. I am trying.
Storybook – Interactions
$ npm run storybook and open the interactions addon tab of http://localhost:6006/?path=/story/example-button–primary.
Storybook – Interaction Testing
$ npm run test-storybook.
If you see the following error when running
TypeError: Jest: Got error running globalSetup - /[root]/node_modules/@storybook/test-runner/playwright/global-setup.js, reason: Class extends value #<Object> is not a constructor or null
Please set the following dependencies according to this issue#18120 .
"jest": "^27.5.1", "jest-runner": "^27.5.1", "jest-environment-node": "27.5.1"
collect test coverage
Storybook doesn’t support coverage from Interaction Testing yet.
jest-playwright does support coverage collecting with option
collectCoverage: true. But it seems not working now.
- shared UI library -> small / composable UI components
- no API request -> don’t need to do mocking
- documented with storybook -> let’s why I do this survey
- use chromatic -> we can play the interactions on it
|Testing Tool||type||coverage||confidence||easy to write||maintainability||happiness|
|Testing Library||unit test||support||7||8||7||8|
|Storybook Interaction Testing||e2e test||N/A||10 (cross browsers)||8||9 (GUI)||10 (interactions)|
|Cypress||e2e test||support||10 (cross browsers)||6||9 (GUI)||8|
Enzyme is useful to test component as a unit. But our target is a shared UI library. So I prefer to ignore the implementation details.
It is a bit slow to update.
React-testing-library is officially recommended by react.
Avoid testing the implementation details. See Why is testing implementation details bad?
Storybook Interaction Testing
Powered by Jest, Playwright, and Testing Library.
The test writing experience is almost the same as using the Testing Library.
Maybe it’s the most popular e2e testing framework now.
How do other UI libraries test their components?
Migration from Enzyme to Testing Library since
playwright as it’s e2e test framework.
Recommend using Testing Library on Ant Design Pro.
puppeteer to write e2e tests.