[Addon-storyshots] Hooks in story break tests

[shmidt-i]

Describe the bug
Recently the feature of using hooks directly inside the stories landed. Unfortunately, it is still an error when using addon-storyshots. Wrapping in component helps

To Reproduce
Steps to reproduce the behavior:

storyOf('Test', module).add('error', () => {
  React.useEffect(() => {}, []);
  return null;
})

Expected behavior
Storyshot with null in it

Screenshots

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one 
of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

      165 |   })
      166 |   .add('error', () => {
    > 167 |     React.useEffect(() => {}, []);
          |           ^
      168 |     return null;
      169 |   })

System:

Environment Info:

System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 10.13.0
Yarn: 1.17.3
npm: 6.5.0
Browsers:
Chrome: 77.0.3865.90
Firefox: 68.0.1
Safari: 13.0
npmPackages:
@storybook/addon-a11y: 5.2.1 => 5.2.1
@storybook/addon-actions: 5.2.1 => 5.2.1
@storybook/addon-knobs: 5.2.1 => 5.2.1
@storybook/addon-links: 5.2.1 => 5.2.1
@storybook/addon-storyshots: 5.2.1 => 5.2.1
@storybook/addon-storysource: 5.2.1 => 5.2.1
@storybook/addons: 5.2.1 => 5.2.1
@storybook/react: 5.2.1 => 5.2.1

Additional context
Add any other context about the problem here.

[uyarn]

Hooks can only be called inside of the body of a function component.
Try to use CSF way to write your stories

[shmidt-i]

CSF maybe will solve the problem, although it's unlikely we are going this way with our codebase.

But, the original question is - according to the #7571 the hooks should work directly in the story. And they do. Until you try to run addon-storyshots, which is broken :)

Upd: looked more in the PR and yes, it seems it was oriented towards CSF usage, but for some reason the code above works when you run storybook.

[shilman]

@shmidt-i i'm curious why you're unlikely to adopt CSF in your codebase

[shmidt-i]

We are using storybook more like a toolset for TDD, that's why all our stories resemble tests descriptions

describe('counter interactivity', () => {
  it('should increment when enabled[special case] (EXPERIMENTAL)', () => {
   

We don't want (at least for now) to do

export default {title: 'counter interactivity'}
export const shouldIncrementWhenEnabled_specialCase__EXPERIMENTAL = ...

[shmidt-i]

And I totally get the benefit of switching towards CSF in a long run, and believe me we've waited a lot for docs and MDX to happen, but that switch cannot be done in one moment and we want to use hooks as first-class citizens already :)

Also, great job on recent changes!!!

[shilman]

cool, we should support storiesOf for awhile so it shouldn't be a problem for you to stick with that. just wanted to know if there was something wrong with CSF specifically that was preventing you from upgrading, and it sounds like there's not.

hopefully we can fix this storyshots problem soon and get you unblocked with hooks!

[tmikeschu]

Confirming this issue:

    "@storybook/addon-actions": "^5.2.1",
    "@storybook/addon-links": "^5.2.1",
    "@storybook/addon-storyshots": "^5.2.1",
    "@storybook/addons": "^5.2.1",
    "@storybook/react": "^5.2.1",
    "babel-plugin-require-context-hook": "^1.0.0",
    "jest": "^24.9.0",
    "react": "^16.9.0",
    node: 10.15.3

Using this as a workaround:

const StoryWithHook = () => {
  const [value, setValue] = useState(0);
  return <div onClick={() => setValue(value + 1)}>{value}</div>;
};

export const storyWithHook = () => <StoryWithHook />;

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[qooban]

Workaround suggested by @tmikeschu works fine, but that way you lose the ability to show the code on the story page:

[B3Kay]

I also got this problem. I want to render a story with hooks and also be able to show the code example. Not just using the workaround like @tmikeschu

[qooban]

@B3Kay I just checked the most recent v5.3.0-alpha.34 and it looks like it works fine in that version.