Storyshots: First-class CSF support

[Hypnosphi]

Issue: #7697

What I did

– Migrated sample stories in storyshots-core to CSF
– Used displayName in generated test names reverted in favor of #7878 (comment)
– Added detection of fileName from req. It won't work with babel-plugin-require-context-hook until smrq/babel-plugin-require-context-hook#9 gets merged and released. Same for require-context.macro storybookjs/require-context.macro#13
– Added @storybook/addon-storyshots/injectFileName transform that adds exports.default.patameters.fileName. Added a warning suggesting to include this transform when getSnapshotFileName is called but fileName is falsy.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-storyshots-csf.storybook.now.sh

[shilman]

This looks great @Hypnosphi 💯

I had a few minor changes inline -- should be an easy fix.

Also, I'm wondering if you've seen this PR that's vaguely related: #7330

I haven't had a chance to address it yet, but I'm wondering if it influences this PR at all? (It might not, just asking.)

[shilman]

@Hypnosphi are there tests to make sure it still works well with the storiesOf files?

[Hypnosphi]

Ok, I'll revert some of the stories

[kylemh]

Merged storybookjs/require-context.macro#13 and released as v1.2.0

[shilman]

@kylemh anything required on the storybook side, or is that just an FYI? AFAIK it's not a storybook dep

[kylemh]

@shilman just an FYI! Nothing needed more from us.

Note Hypno's 3rd bullet in OP.

[Hypnosphi]

@shilman it's one of the solutions to require.context problem we suggest in our docs.

[shilman]

@kylemh @Hypnosphi thanks for the clarification. i know about the package -- just missed the ref in your original PR @Hypnosphi . makes sense! 👍

[Hypnosphi]

@shilman can you please re-review?

[shilman]

Really great work @Hypnosphi. Thanks so much for taking care of this 🙏

[shilman]

@Hypnosphi can you take a look at the failing story in Chromatic?

[Hypnosphi]

@shilman looks like at some point @ndelangen switched chromatic to use production build, and in production webpack replaces filenames with numbers. It won't be a problem in storyshot tests.

I think I'll filter out the fileName parameter from this story to avoid confusion

[JohnAlbin]

This documentation change differs from what is displayed in the warning below. https://github.com/storybookjs/storybook/pull/8000/files#diff-c4bcb815683c4c92762d0a868383a06cR38

Storybook was unable to detect filename for stories of kind "${kind}".
To fix it, add following to your jest.config.js:
    transform: {
      // should be above any other js transform like babel-jest
      '^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
    }

Which one is the correct advice?

Yes, I know that \\\\ is the JS equivalent of two backslashes output. However, I'm seeing all 4 backslashes on the console.

Hmm… I guess I answered my own question. I should be using two backslashes in my Jest config. The bug is in the console warning showing 4 backslashes.