How to run storybook on bundled dist file

[shawnmclean]

Hello,

I'm using rollup to bundle a file dist/my-lib.js.

I have storybook running tests on these components before bundling, but we've recently run into an issue where rollup bundled went wonky with some dependencies with react and mui and the production bundle wasn't rendered correctly as shown in dev and the storybook built output.

What would be the recommended way of using storybook as a sort of black box visual regression testing framework for this scenario?

For eg. We dynamically import this library and execute it in production.

const myLib = await import('dist/my-lib.js');
myLib.default('some-element-id-container-to-render-in');

Is there a way to do this in storybook and send this screenshot over to chromatic?

[shilman]

We recommend co-locating your stories with your components. You'll get things like auto-generated controls.

However, Storybook shouldn't have any problems with stories that use components imported from a library. Since every library is different, I can't give a generic recipe for this.

If the components MUST be loaded asynchronously, we have experimental support here: https://storybook.js.org/docs/react/writing-stories/loaders

However, I'd recommend loading them synchronously in your Storybook if possible.