storybook/docs/workflows/faq.md

title
Frequently Asked Questions

Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the Storybook Repository.

How can I run coverage tests with Create React App and leave out stories?

Create React App does not allow providing options to Jest in your package.json, however you can run jest with commandline arguments:

npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stories/*"]'

I see ReferenceError: React is not defined when using storybooks with Next.js

Next automatically defines React for all of your files via a babel plugin. You must define React for JSX to work. You can solve this either by:

1. Adding import React from 'react' to your component files.
2. Adding a .babelrc that includes babel-plugin-react-require

How do I setup Storybook to share Webpack configuration with Next.js?

You can generally reuse webpack rules by placing them in a file that is require()-ed from both your next.config.js and your .storybook/main.js files. For example:

module.exports = {
  webpackFinal: async (baseConfig) => {
    const nextConfig = require('/path/to/next.config.js');

    // merge whatever from nextConfig into the webpack config storybook will use
    return { ...baseConfig };
  },
};

How do I setup React Fast Refresh with Storybook?

Fast refresh is an opt-in feature that can be used in Storybook React. There are two ways that you can enable it, go ahead and pick one:

• You can set a FAST_REFRESH environment variable in your .env file:

FAST_REFRESH=true

• Or you can set the following properties in your .storybook/main.js files:

module.exports = {
  reactOptions: {
    fastRefresh: true,
  }
};

Note: Fast Refresh requires React 16.10 or higher and is only enabled in development mode.

Why is there no addons channel?

A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:

1. You're trying to access addon channel (e.g. by calling setOptions) in a non-browser environment like Jest. You may need to add a channel mock:

   import addons, { mockChannel } from '@storybook/addons';
   
   addons.setChannel(mockChannel());
   

2. In React Native, it's a special case that's documented in #1192

Can I modify React component state in stories?

Not directly. If you control the component source, you can do something like this:

import React, { Component } from 'react';

export default {
  title: 'MyComponent',
};

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      someVar: 'defaultValue',
      ...props.initialState,
    };
  }
  // ...
};

export const defaultView = () => <MyComponent initialState={} />;

Which community addons are compatible with the latest version of Storybook?

Starting with Storybook version 6.0 we've introduced some great features aimed at streamlining your development workflow.

With this we would like to point out that if you plan on using addons created by our fantastic community, you need to take in consideration that some of those addons might be working with a outdated version of Storybook.

We're actively working in providing a better way to address this situation, but in the meantime we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating a issue in the Storybook repo so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.

Is it possible to browse the documentation for past versions of Storybook?

With the release of version 6.0, we also updated our documentation as well. That doesn't mean that the old documentation was removed, we kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide .

We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more you'll have to check the specific release in the monorepo.

Section	Page	Current Location	Version 5.3 location	Version 5.0 location
Get Started	Install	See current documentation	See versioned documentation	See versioned documentation
	What's a story	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
	Browse Stories	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
	Setup	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
Writing Stories	Introduction	See current documentation	See versioned documentation	See versioned documentation
	Parameters	See current documentation	See versioned documentation here	Non existing feature or undocumented
	Decorators	See current documentation	See versioned documentation here	See versioned documentation here
	Naming components and hierarchy	See current documentation	See versioned documentation	See versioned documentation
Writing Docs	DocsPage	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	MDX	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Preview and build docs	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
Essential addons	Controls	See current documentation	Controls are specific to version 6.0 see Knobs versioned documentation	Controls are specific to version 6.0 see Knobs versioned documentation
	Actions	See current documentation	See addon versioned documentation	See addon versioned documentation
	Viewport	See current documentation	See addon versioned documentation	See addon versioned documentation
	Backgrounds	See current documentation	See addon versioned documentation	See addon versioned documentation
	Toolbars and globals	See current documentation	See versioned documentation	Non existing feature or undocumented
Configure	Overview	See current documentation	See versioned documentation	See versioned documentation
	Integration/Webpack	See current documentation	See versioned documentation	See versioned documentation
	Integration/Babel	See current documentation	See versioned documentation here and here	See versioned documentation here and here
	Integration/Typescript	See current documentation	See versioned documentation	See versioned documentation
	Integration/Styling and CSS	See current documentation	See versioned documentation	See versioned documentation
	Integration/Images and assets	See current documentation	See versioned documentation	See versioned documentation
	Story rendering	See current documentation	See versioned documentation here and here	See versioned documentation here
	Story Layout	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	User Interface/Features and behavior	See current documentation	See versioned documentation	See versioned documentation
	User Interface/Theming	See current documentation	See versioned documentation	See versioned documentation
	User Interface/Sidebar & URLS	See current documentation	See versioned documentation	See versioned documentation
	Environment variables	See current documentation	See versioned documentation	See versioned documentation
Workflows	Publish Storybook	See current documentation	See versioned documentation	See versioned documentation
	Build pages and screens	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Stories for multiple components	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Testing with Storybook/Unit Testing	See current documentation	See versioned documentation	See versioned documentation
	Testing with Storybook/Visual Testing	See current documentation	See versioned documentation	See versioned documentation
	Testing with Storybook/Interaction Testing	See current documentation	See versioned documentation	See versioned documentation
	Testing with Storybook/Snapshot Testing	See current documentation	See versioned documentation	See versioned documentation
API	Stories/Component Story Format	See current documentation	See versioned documentation	Non existing feature or undocumented
	Stories/MDX syntax	See current documentation	See versioned documentation	Non existing feature or undocumented
	Stories/StoriesOF format (see note below)	See current documentation	See versioned documentation	Non existing feature or undocumented
	Addons/Introduction	See current documentation	See versioned documentation	See versioned documentation
	Addons/Presets	See current documentation	See versioned documentation	Non existing feature or undocumented
	Addons/Writing Presets	See current documentation	See versioned documentation	Non existing feature or undocumented
	Addons/Addons API	See current documentation	See versioned documentation	See versioned documentation
	Frameworks	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	CLI options	See current documentation	See versioned documentation	See versioned documentation

With the release of version 5.3 we've updated how you can write your stories to a more compact and easier way. It doesn't mean that the storiesOF format has been removed. For the time being we're still supporting it and we have documentation for it. But be advised that this is bound to change in the future.