No snapshots generated for MDX stories (CRA)

[kfayelun]

Describe the bug Storyshots(storyshots-core) on CRA project with newest Storybook(5.3.0-beta.16) doesn't generate snapshots for MDX stories. This applies to MDX stories with and without block. CSF stories works as expected.

To Reproduce Steps to reproduce the behavior:

1. Go to '.https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core'
2. Follow instructions for CRA project, using the CSF and macro options
3. Add the MDX part to jest config https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core#configure-jest-for-mdx-docs-add-on-stories
4. Add the init file: https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core#configure-storyshots-for-html-snapshots
5. Run npm run test and see that the snapshot generated only covers CSF stories and not MDX stories.

Expected behavior It should generate snapshots for all stories.

Code snippets Repo here: https://github.com/netliferesearch/imdi-design-system

System: Environment Info:

System: OS: macOS 10.15 CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz Binaries: Node: 10.16.3 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.108 Firefox: 70.0.1 Safari: 13.0.2 npmPackages: @storybook/addon-a11y: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/addon-actions: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/addon-docs: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/addon-links: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/addon-storyshots: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/addons: ^5.3.0-beta.16 => 5.3.0-beta.16 @storybook/preset-create-react-app: ^1.3.2 => 1.3.2 @storybook/react: ^5.3.0-beta.16 => 5.3.0-beta.16

Additional context Bootstrapped with CRA, using customize cra to be able to use Less styles.

[ian-callaghan]

Was this ever resolved? I have the same issue.

[kfayelun]

No, not as far as I know. Very keen on this!

[ian-callaghan]

That is a shame I will post my workaround that I am currently using until this is fixed.

This uses a regular CSF stories file that works fine with storyshots. Then we can use an MDX file (not .stories. format) to add additional markdown for the docs page.

This gives us the best of both and could even be argued it looks a little cleaner in terms of content in the individual files.

Button.stories.tsx:

import mdx from "./Button.mdx"

export default {
    component: Button,
    title: "Core|Button",
    parameters: {
        docs: {
            page: mdx,
        },
    },
}

export const Default = () => (
    <StoryStuff>...</StoryStuff>
)

Button.mdx:

<Anchor storyId="core-button--default" />

# Button

Add description here

<Preview>
    <Story id="core-button--default"></Story>
</Preview>

[kfayelun]

Thanks for sharing @ian-callaghan. Does this mean that you get 2 stories for the button component in your Storybook or do you hide the 1 of them? If so, how?

[ian-callaghan]

Thanks for sharing @ian-callaghan. Does this mean that you get 2 stories for the button component in your Storybook or do you hide the 1 of them? If so, how?

As long as we do not use the .stories for the MDX filename (Button.mdx not Button.stories.mdx) then you will not get duplicates.

I did originally try doing the opposite way, importing the CSF into the MDX but that causes duplication if done in a way that keeps storyshots.

[stale[bot]]

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!

[DariaKalinina]

Hi! I have the same problem( @shilman No solution yet?

[shilman]

@DariaKalinina no, and AFAIK nobody's working on it at the moment. any takers?

[gsklee]

@shilman any idea on where is the likely cause? May be able to take a look.

[shilman]

@gsklee sorry, I don't know off the top of my head. @Hypnosphi any chance you can give @gsklee some pointers?

[stale[bot]]

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!

[brycesnyder]

Having same issue.. no work around from what I can find that is sufficient.

[ian-callaghan]

Having same issue.. no work around from what I can find that is sufficient.

I posted a workaround above, it requires using CSF stories and then adding markup in a separate MDX file.

It's inconvenient but works, might be the best option until someone provides a real fix.

[SethDavenport]

@ian-callaghan I'm actually struggling to implement your workaround because storyshots doesn't seem to find any CSF stories for me, only the old-style storiesOf stories. This open issue suggests that CSF doesn't work with storyshots so I'm curious how you got it working: https://github.com/storybookjs/storybook/issues/10673

Storybook 5.3.19 FWIW

[SethDavenport]

Red herring, sorry. CSF does work as long as you get the config right 🤦

[GasimGasimzada]

@SethDavenport if its okay, could you please show us your config for both .storybook/main.js and jest config? I have been trying everything in Storybook v6 but for some reason I get report that visual tests exist (I'm using jest-image-snapshot + puppeteer) but the visual test snapshots are never generated.

[ndelangen]

The future of storyshots is the test-runner: https://storybook.js.org/docs/react/writing-tests/test-runner#page-top

And use the play function for expectations: https://storybook.js.org/docs/react/writing-stories/play-function#page-top

We will not be making any improvement / changes to storyshots.