A set of utilities and helpers to power our Storybooks.

Usage no npm install needed!

<script type="module">
  import charlietangoStorybookUtils from 'https://cdn.skypack.dev/@charlietango/storybook-utils';



A set of utilities and helpers to power our Storybooks.


Install using Yarn:

yarn add @charlietango/storybook-utils --dev

or NPM:

npm install @charlietango/storybook-utils --save-dev


You will need to have the following peer dependencies installed:

  • react
  • @testing-library/react



Automatically test all Storybook stories in your project. Provide testStories with a glob (or globs) pointing to all your CSF storybook files.


import { testStories } from "@charlietango/storybook-utils";



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.


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;


  • src/components/Header/Header.story.tsx 🡆 components/Header
  • components/Header/Header.story.tsx 🡆 components/Header
  • src/components/Header/Navigation/Navigation.story.tsx 🡆 components/Header/Navigation