Skip to content

Commit

Permalink
adds faq to the documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
jonniebigodes committed Aug 11, 2020
1 parent 7a34522 commit f899683
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 0 deletions.
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={} />;
```

0 comments on commit f899683

Please sign in to comment.