Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adds faq to the documentation #11882

Merged
merged 1 commit into from
Aug 11, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/toc.js
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,11 @@ module.exports = {
title: 'Package Composition',
type: 'link',
},
{
pathSegment: 'faq',
title: 'Frequently Asked Questions',
type: 'link',
},
],
},
{
Expand Down
74 changes: 74 additions & 0 deletions docs/workflows/faq.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
---
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](https://github.com/storybookjs/storybook/).

### 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:

```sh
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`](https://www.npmjs.com/package/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:

```js
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 };
},
};
```

### 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:
```js
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());
```

2. In React Native, it's a special case that's documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)

### Can I modify React component state in stories?

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

```js
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={} />;
```