CSF stories with defined docs are not picked up by Storyshots

[ajkl2533]

Describe the bug
First I tried to use MDX format directly and define stories in it but it didn't work for me (#7223), so I tried to use CSF to define stories and add MDX file into parameters (https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx) but it doesn't work either. If I remove docs parameter from default export it storyshots will find the stories and create snapshots.

Expected behavior
Stories are picked up by storyshots even if docs are defined in default export parameters.

Code snippets

// Icon.stories.tsx
import React from 'react';
import styled from 'styled-components';

import { StoryMeta } from '../../../.storybook/storybook.types';
import IconDocs from './Icon.mdx';
import Icon from './Icon';
import { IconNames, IconTypes } from './Icon.enums';

export default {
  title: 'Components/Icon',
  component: Icon,
  parameters: {. // if I remove parameters section snapshots are generated
    docs: {
      page: IconDocs,
    },
  },
};

export const lightIcon: StoryMeta<JSX.Element> = () => (
  <Icon name={IconNames.longArrowRight} type={IconTypes.light} />
);

lightIcon.storyName = 'Light Icon';

// storyshots.runner.ts
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

const pathToStorybookStatic = path.join(__dirname, '../storybook-static');

initStoryshots({
  suite: 'Image snapshots',
  storyNameRegex: /^((?!.*?DontTest).)*$/,
  framework: 'react',
  configPath: path.join(__dirname, '../.storybook'),
  test: imageSnapshot({
    storybookUrl:
      process.env.CI === 'true'
        ? `file://${pathToStorybookStatic}`
        : // : `http://host.docker.internal:8008`,
          'http://localhost:8008',
    getMatchOptions: () => ({
      failureThreshold: 0.0,
      failureThresholdType: 'percent',
    }),
  }),
});

// main.ts
module.exports = {
  stories: ['../src/**/*.stories.@(tsx|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-docs'],
  logLevel: 'verbose',
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

// jest.config.js
module.exports = {
  rootDir: path.join(__dirname, '..'),
  roots: ['./storyshots'],
  testMatch: ['./**/storyshots.runner.ts'],
  transform: {
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
    '^.+\\.tsx?$': 'ts-jest',
  },
  setupFilesAfterEnv: ['./jest.setup.ts'],
  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
  testPathIgnorePatterns: ['node_modules/'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'identity-obj-proxy',
  },
}

System:

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/Documents/PROJECTS/ambrosia-design-system/node_modules/.bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-rc.3 => 6.0.0-rc.3 
    @storybook/addon-docs: ^6.0.0-rc.3 => 6.0.0-rc.3 
    @storybook/addon-storyshots: ^6.0.0-rc.3 => 6.0.0-rc.3 
    @storybook/addon-storyshots-puppeteer: ^6.0.0-rc.3 => 6.0.0-rc.3 
    @storybook/react: ^6.0.0-rc.3 => 6.0.0-rc.3 
    @storybook/theming: ^6.0.0-rc.3 => 6.0.0-rc.3 

[ajkl2533]

@shilman any update on this?

[stale]

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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[latviancoder]

We've encountered the same issue, but it had nothing to do with storybook. In our case the files weren't getting recognised by jest.

Adding this line to jest storyshots config fixed the problem:

moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'mdx'],

https://jestjs.io/docs/en/configuration#modulefileextensions-arraystring