[Addon-storyshots] Hooks in story break tests #8177

shmidt-i · 2019-09-24T08:46:05Z

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.

The text was updated successfully, but these errors were encountered:

uyarn · 2019-09-24T09:56:07Z

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

shmidt-i · 2019-09-24T13:06:31Z

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 · 2019-09-24T13:24:29Z

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

shmidt-i · 2019-09-24T13:53:22Z

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 · 2019-09-24T13:55:54Z

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 · 2019-09-24T16:03:33Z

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 · 2019-09-26T19:42:48Z

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 · 2019-10-17T20:14:59Z

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 · 2019-10-18T08:56:49Z

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

B3Kay · 2019-10-30T08:42:47Z

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 · 2019-10-30T12:39:39Z

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

shilman · 2019-10-30T16:47:20Z

@B3Kay if you can verify this works in the alpha, I'd love to close this issue 😄

qooban · 2019-10-31T13:51:37Z

@shilman @B3Kay Sorry, my bad, I just checked if the docs are presented properly, but not checked if the storyshots are working fine. Unfortunatelly - this issue is still valid.

sdrissi · 2019-11-15T16:04:16Z

Hey there! Same issue for me with React hooks in CSF stories...Any idea when a fix will be available (I would gladly contribute to fix the issue but I'm not familiar with your codebase).

brandon-leapyear · 2019-11-19T01:33:11Z

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

Hi, coming across this issue using CSF. Am currently using this workaround:

+// https://github.com/storybookjs/storybook/issues/8177
+const storyshotsHack = (StoryFn: React.FC) => () => <StoryFn />
 
-export const basic = () => {
+export const basic = storyshotsHack(() => {
   const [isToggled, setIsToggled] = useState(false)
   return (
     <>
       <Text>Normal Toggle</Text>
       <Toggle value={isToggled} onClick={() => setIsToggled(!isToggled)} />
     </>
   )
-}
+})

sdrissi · 2019-11-19T11:10:56Z

Thanks @brandon-leapyear for your solution. I've tried it and it's a better alternative than the one suggested by @tmikeschu since it keeps the source code. @B3Kay this should do the trick

stale · 2019-12-11T00:44:55Z

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!

chrisfosterelli · 2019-12-17T23:21:16Z

You can also wrap the story in React.createElement as the PR mentioned above does. It seems for some reason the PR applied to the stories in storybook but not for storyshots.

shilman · 2019-12-18T02:24:28Z

We could probably apply that here:

https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts#L5

https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/src/frameworks/react/renderShallowTree.ts#L5

Anybody want to give that a try?

tmikeschu · 2019-12-18T02:29:35Z

@shilman I can take a look tomorrow! I haven't contributed yet and I'd like to 😄

tmikeschu · 2019-12-18T17:42:34Z

#9187

tmikeschu · 2019-12-18T22:22:47Z

It's interesting that @brandon-leapyear 's solution is like a lazy identity function. Just food for thought!

stale · 2020-01-08T22:42:18Z

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!

stale · 2020-02-08T01:27:05Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Bjodol · 2020-03-16T11:25:38Z

Hey! Came over this issue and found a solution that simplify the hack.
Add to your .storybook/preview.js:

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import React from 'react';

addDecorator(StoryFn => {
    return (
            <StoryFn />
    );
});

timwuhaotian · 2020-03-17T04:02:15Z

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 />;

It works for me, I am using jest and storyshots, initially it throws the Invalid hook call error, I checked the React duplicate issue and all other suggestions, but no luck.

until I find this solution!

qdozaq · 2020-03-17T19:05:15Z

@Bjodol 's solution is perfect and can actually be simplified even more!

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import {createElement} from 'react';

addDecorator(createElement);

vdh · 2020-03-19T02:42:16Z

These workarounds still break the snapshots though? AFAIK any shallow rendering is wrecked by this hack.

varundey · 2020-04-15T07:10:58Z

Facing same issue with react, react-dom and react-test-renderer v16.13.1

brandon-leapyear · 2020-04-20T18:49:53Z

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

FYI storybook works with hooks now: #7571

it would be great to get the same support with storyshots

shilman · 2020-04-27T03:50:25Z

Released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.43 which contains #10529 and may address this

michaelbayday · 2020-07-03T02:26:48Z

I'm still getting this issue. Does anyone have any suggestions?

main.js

// We are using the beta version of storybook 6.0 which address typescript issues with documentation.
// Addons and the library should be updated to the next major release.
const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
    '@storybook/addon-viewport',
    '@storybook/addon-docs',
    '@storybook/addon-links',
  ],
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      assets: path.resolve(__dirname, '../src/assets/'),
    };
    return config;
  },
};

manager.js

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme,
});

preview.js

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { addDecorator } from '@storybook/react';
import { addParameters } from '@storybook/client-api';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const GlobalStyle = createGlobalStyle`
  html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: black;
  }
  * {
    font-family:  'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  #root {
    font-size: 1.6rem;
  }
`;

addDecorator((storyFn) => (
  <>
    <GlobalStyle />
    {storyFn()}
  </>
));

addParameters({
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
});

storyshots.test.js

import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
import renderer from 'react-test-renderer';
import { styleSheetSerializer } from 'jest-styled-components/serializer';
import { addSerializer } from 'jest-specific-snapshot';

addSerializer(styleSheetSerializer);

initStoryshots({
  test: ({ story, context }) => {
    const converter = new Stories2SnapsConverter();
    const snapshotFilename = converter.getSnapshotFileName(context);
    const storyElement = story.render(context);
    const tree = renderer.create(storyElement).toJSON();
    expect(tree).toMatchSpecificSnapshot(snapshotFilename);
  },
});

jest.config.js

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  roots: ['src'],
  setupFilesAfterEnv: ['./jest.setup.js'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  transformIgnorePatterns: ['node_modules/(?!@storybook/*)'],
  testMatch: ['**/*.test.(js)'],
  moduleNameMapper: {
    // Mocks out all these file formats when tests are run.
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
  },
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.test.json',
    },
  },
  collectCoverageFrom: ['src/**/*.tsx'],
};

jest.setup.js

import '@testing-library/jest-dom';

The serialization of the styled components is working, but just running into this last hiccup.

I'm running storybook v6.0.0-beta.39

…ooks work storybookjs/storybook#8177 (comment)

shilman added addon: storyshots bug labels Sep 24, 2019

stale bot added the inactive label Oct 17, 2019

stale bot removed the inactive label Oct 18, 2019

gziolo mentioned this issue Oct 18, 2019

Storybook: Add StoryShots integration to generate unit tests WordPress/gutenberg#18031

Merged

shilman added the has workaround label Nov 20, 2019

stale bot added the inactive label Dec 11, 2019

stale bot removed the inactive label Dec 17, 2019

tmikeschu mentioned this issue Dec 18, 2019

Storyshots: update render w/ React.createElement #9187

Closed

stale bot added the inactive label Jan 8, 2020

stale bot closed this as completed Feb 8, 2020

brandon-leapyear mentioned this issue Apr 20, 2020

Support hooks in storyshots #10483

Closed

DianaLease mentioned this issue Jun 30, 2020

test(storybook): implement storyshots snapshot testing accordproject/web-components#130

Merged

jjoselv mentioned this issue Aug 24, 2020

Addon-docs: Invalid hook call #8647

Closed

tay1orjones added a commit to carbon-design-system/carbon-addons-iot-react that referenced this issue Oct 28, 2020

docs(storybook): fix lint errors, use createElement as decorator so h…

8140ee4

…ooks work storybookjs/storybook#8177 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Addon-storyshots] Hooks in story break tests #8177

[Addon-storyshots] Hooks in story break tests #8177

shmidt-i commented Sep 24, 2019 •

edited

Loading

uyarn commented Sep 24, 2019

shmidt-i commented Sep 24, 2019 •

edited

Loading

shilman commented Sep 24, 2019

shmidt-i commented Sep 24, 2019 •

edited

Loading

shmidt-i commented Sep 24, 2019

shilman commented Sep 24, 2019

tmikeschu commented Sep 26, 2019

stale bot commented Oct 17, 2019

qooban commented Oct 18, 2019

B3Kay commented Oct 30, 2019

qooban commented Oct 30, 2019

shilman commented Oct 30, 2019

qooban commented Oct 31, 2019

sdrissi commented Nov 15, 2019

brandon-leapyear commented Nov 19, 2019 •

edited

Loading

sdrissi commented Nov 19, 2019 •

edited

Loading

stale bot commented Dec 11, 2019

chrisfosterelli commented Dec 17, 2019

shilman commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

stale bot commented Jan 8, 2020

stale bot commented Feb 8, 2020

Bjodol commented Mar 16, 2020

timwuhaotian commented Mar 17, 2020

qdozaq commented Mar 17, 2020

vdh commented Mar 19, 2020

varundey commented Apr 15, 2020

brandon-leapyear commented Apr 20, 2020 •

edited

Loading

shilman commented Apr 27, 2020

michaelbayday commented Jul 3, 2020 •

edited

Loading

[Addon-storyshots] Hooks in story break tests #8177

[Addon-storyshots] Hooks in story break tests #8177

Comments

shmidt-i commented Sep 24, 2019 • edited Loading

uyarn commented Sep 24, 2019

shmidt-i commented Sep 24, 2019 • edited Loading

shilman commented Sep 24, 2019

shmidt-i commented Sep 24, 2019 • edited Loading

shmidt-i commented Sep 24, 2019

shilman commented Sep 24, 2019

tmikeschu commented Sep 26, 2019

stale bot commented Oct 17, 2019

qooban commented Oct 18, 2019

B3Kay commented Oct 30, 2019

qooban commented Oct 30, 2019

shilman commented Oct 30, 2019

qooban commented Oct 31, 2019

sdrissi commented Nov 15, 2019

brandon-leapyear commented Nov 19, 2019 • edited Loading

sdrissi commented Nov 19, 2019 • edited Loading

stale bot commented Dec 11, 2019

chrisfosterelli commented Dec 17, 2019

shilman commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

tmikeschu commented Dec 18, 2019

stale bot commented Jan 8, 2020

stale bot commented Feb 8, 2020

Bjodol commented Mar 16, 2020

timwuhaotian commented Mar 17, 2020

qdozaq commented Mar 17, 2020

vdh commented Mar 19, 2020

varundey commented Apr 15, 2020

brandon-leapyear commented Apr 20, 2020 • edited Loading

shilman commented Apr 27, 2020

michaelbayday commented Jul 3, 2020 • edited Loading

shmidt-i commented Sep 24, 2019 •

edited

Loading

shmidt-i commented Sep 24, 2019 •

edited

Loading

shmidt-i commented Sep 24, 2019 •

edited

Loading

brandon-leapyear commented Nov 19, 2019 •

edited

Loading

sdrissi commented Nov 19, 2019 •

edited

Loading

brandon-leapyear commented Apr 20, 2020 •

edited

Loading

michaelbayday commented Jul 3, 2020 •

edited

Loading