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

How to pass custom data from story to storyshots ? #4330

Closed
bertho-zero opened this issue Oct 9, 2018 · 5 comments
Closed

How to pass custom data from story to storyshots ? #4330

bertho-zero opened this issue Oct 9, 2018 · 5 comments

Comments

@bertho-zero
Copy link
Contributor

I'm using version 4.0.0-alpha.24 from @storybook/react and @storybook/addon-storyshots.

The example below comes from the doc, I would like to know how to replace the value of waitTime by a parameter coming from the stories, do you have an idea?

/**
 * @jest-environment jsdom
 */

import path from 'path';
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '@storybook/addon-storyshots';
import { mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import toJson from 'enzyme-to-json';

configure( { adapter: new Adapter() } );

initStoryshots( {
  framework: 'react',
  configPath: path.join( __dirname, '..', '.storybook' ),
  integrityOptions: { cwd: path.join( __dirname, 'stories' ) },
  asyncJest: true,
  test: ( { story, context, done } ) => {
    const converter = new Stories2SnapsConverter();
    const snapshotFilename = converter.getSnapshotFileName( context );
    const storyElement = story.render( context );

    // mount the story
    const tree = mount( storyElement );

    // wait until the mount is updated, in our app mostly by Relay
    // but maybe something else updating the state of the component
    // somewhere
    const waitTime = 1;
    setTimeout( () => {
      if ( snapshotFilename ) {
        expect( toJson( tree.update() ) )
          .toMatchSpecificSnapshot( snapshotFilename );
      }

      done();
    }, waitTime );
  }
} );

Something like:

storiesOf( 'AbilitiesForm', module )
  .add(
    'basic',
    () => <AbilitiesForm />,
    { jestWaitTime: 1500 } // <== This is invisible in the Jest test
  );

Thank you !

@igor-dv
Copy link
Member

igor-dv commented Oct 9, 2018

Currently, it's not possible. We have this #4010 that will make it possible after some refactoring probably.

you can do something like this (but it's 🤢)

storiesOf( 'AbilitiesForm', module )
  .add(
    'basic',
    () => {
      const component = <AbilitiesForm />;
      component.jestWaitTime = 1500;
      return component;
    }
  );

and then in your storyshot:

const storyElement = story.render( context );
const waitTime = storyElement.jestWaitTime || 1;

IDK if it's working

@bertho-zero
Copy link
Contributor Author

React does not allow us to do this:

TypeError: Cannot add property jestWaitTime, object is not extensible

@igor-dv
Copy link
Member

igor-dv commented Oct 10, 2018

maybe something like this ?

storiesOf( 'AbilitiesForm', module )
  .add(
    'basic',
    () => {
      const component = <AbilitiesForm />;

      if (proccess.env.STORYBOOK_MODE === 'test') {
        return {
          component,
          jestWaitTime: 1500,
        }
      }

      return component;
    }
  );

you will need to set STORYBOOK_MODE env or something similar while testing. It's still 💩 though

@bertho-zero
Copy link
Contributor Author

It works, it will be better when we can pass parameters to @storybook/addon-storyshots. Thanks !

The initial problem and I would like to wait for the end of my componentDidMount (which returns an irrecoverable promise). I think it's not the best to wait for a predefined time instead of waiting for the end of the promise.

@igor-dv
Copy link
Member

igor-dv commented Oct 10, 2018

Yeah, it's not the best. Maybe you can pass the done callback to your component, though

@igor-dv igor-dv closed this as completed Oct 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants