Addons unlock superior options and new workflows for Storybook
Word: After including addon dependency to your venture you will have to replace addons array in .storybook/principal.js file,
Let’s start.
Hyperlink tales collectively to construct demos and prototypes along with your UI parts.
yarn add -D @storybook/addon-links
linkTo Instance:
Outcomes:
withLinks instance:
Take a look at element compliance with internet accessibility requirements.
yarn add @storybook/addon-a11y --dev
Outcomes:
Moreover, you possibly can verify the accessibility toolbar:
Storybook addon for embedding your design preview in addon panel.
yarn add -D storybook-addon-designs
Instance:
Outcomes:
View a narrative’s supply code to see the way it works and paste it into your app.
yarn add @storybook/addon-storysource -D
Outcomes:
Mock API requests in Storybook with Mock Service Employee.
Options
- Mock Relaxation and GraphQL request proper inside your story.
- Doc how a element behaves in numerous eventualities.
- Get a11y, snapshot, and visible checks utilizing different addons at no cost.
First, we might want to initialize Mock Service Employee to allow international mocks. These might be enabled in your dev setting as properly.
Add msw and msw-storybook-addon libraries to your venture:
yarn add msw msw-storybook-addon -D
Run MSW init command:
npx msw init public/ --save
It’s going to create public/mockServiceWorker.js file:
Subsequent, replace the addon array with msw-storybook-addon in .storybook/principal.js file:
Replace .storybook/preview.js file
Subsequent, replace your story with msw decorator and add API mocks:
Instance:
Testing utilities that will let you reuse your tales in your unit checks.
yarn add @storybook/testing-react -D
Let’s think about that now we have a easy element:
with three easy tales:
- Loading state;
- Information efficiently fetched state;
- Error state;
Tales
We have already got mocked knowledge, so we don’t want to do that once more in our checks once more. We are able to simply reuse our tales:
Storybook Addon Interactions permits visible debugging of interactions and checks in Storybook.
yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-library
Let’s create a easy element. We received a number of completely different situations:
With interactions addon you don’t must manually comply with element steps time and again:
With play operate your can describe interplay steps and Storybook will reproduce them.
End result with delay:
End result with out delays (helpful for checks):
⚠️ NOTE: Whilst you can technically use display, it is beneficial to make use of inside(canvasElement). Moreover supplying you with a greater error message when a DOM aspect cannot be discovered, it is going to additionally guarantee your play operate is suitable with Storybook Docs.
⚠️ NOTE: You’ll be able to reuse play operate in your checks as properly
Automate visible testing throughout browsers. Collect UI suggestions. Versioned documentation. You’ll be able to verify about it in my different story:
CSS pseudo-states for Storybook.
yarn add storybook-addon-pseudo-states -D
End result:
Instance:
A storybook addon to assist higher perceive and debug efficiency for React parts
yarn add storybook-addon-performance --dev
.storybook/principal.js file replace:
module.exports =
addons: ['storybook-addon-performance/register'],
;
Element instance:
Story:
End result:
You’ll be able to choose what number of copies of your element ought to be rendered and click on Begin all . The consequence can be up to date every time with out financial savings, however…
If you’ll click on in Pin as baseline button, make adjustments to your element, and click on Begin all once more you will note variations.
I’ll add a easy onClick operate, and restart:
Outcomes after Begin all:
