1.2.0 • Published 3 years ago
@charlietango/storybook-utils v1.2.0
@charlietango/storybook-utils
A set of utilities and helpers to power our Storybooks.
Installation
Install using Yarn:
yarn add @charlietango/storybook-utils --devor NPM:
npm install @charlietango/storybook-utils --save-devRequirements
You will need to have the following peer dependencies installed:
react@testing-library/react
Usage
testStories
Automatically test all Storybook stories in your project. Provide testStories with a glob (or globs) pointing to all your CSF storybook files.
src/tests/stories.test.ts
import { testStories } from "@charlietango/storybook-utils";
testStories("./src/**/*.{story,stories}.{js,tsx}");Options
In addition to the glob, testStories also accepts an options object.
| Command | Description |
|---|---|
customRender | Provide a custom render method, instead of the default from @testing-library/react. This is used to apply a fixed set of decorators around all your stories. https://testing-library.com/docs/react-testing-library/setup#custom-render |
callback | Callback after each render(). Use this if you need to perform custom validation. If not defined, a default await waitFor call will be made, to ensure stories are fully loaded. |
storybookConfig | Global configuration from the Storybook - Use this to add decorators around all stories. |
createStoryPath
This method takes the base from paths.macro and, converts it to usable Storybook path.
This is useful to create a title for your stories, that reflect their current location.
import { createStoryPath } from "@charlietango/storybook-utils";
import base from "paths.macro";
export default {
title: createStoryPath(base),
} as Meta;Examples
src/components/Header/Header.story.tsx🡆components/Headercomponents/Header/Header.story.tsx🡆components/Headersrc/components/Header/Navigation/Navigation.story.tsx🡆components/Header/Navigation