No snapshots generated for MDX stories (CRA)

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 <Story> 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® Core™ 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]

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>

[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.