Storybook: [StoryShots] No preview on CSF stories in pictures.

[EdenTurgeman]

Describe the bug
After upgrading to the latest beta.19activating my StoryShots test to update some snapshots, the component i migrated to CSF shows no-preview in its pictures.
It only applies to sub-stories inside the main one (which works fine)

The main story:

One of the sub-stories:

The story in question:

import React from 'react';
import { Card, Container } from '................/styleguide';
import { boolean, select } from '@storybook/addon-knobs';

export default {
  title: 'WOW',
  component: Card,
};

const color = select('Color', ['null', 'orange', 'yellow', 'blue', 'lightBlue'], 'blue');
const accent = select('Accent', ['null', 'orange', 'yellow', 'blue', 'lightBlue'], 'yellow');
const rounded = boolean('Rounded', true);
const borderLess = boolean('Borderless', true);

export const all = () => (
  <>
    <Card>Basic Card</Card>
    <Card accent={accent}>Accent</Card>
    <Card borderless={borderLess} color={color}>
      I have no Borders!
    </Card>
    <Card rounded={rounded} borderless={borderLess} color={color}>
      I am Rounded AND BorderLess
    </Card>
  </>
);

export const WithAccent = () => <Card accent={accent}>Accent</Card>;

export const BorderLess = () => (
  <Card borderless={borderLess} color={color}>
    I have no Borders!
  </Card>
);
export const Rounded = () => (
  <Card rounded={rounded} borderless={borderLess} color={color}>
    I am Rounded
  </Card>
);

BorderLess.story = {
  name: 'BorderLess Card',
};

Rounded.story = {
  name: 'Rounded Card',
};
WithAccent.story = {
  name: 'Card With Accent',
};

My webpack config:

const path = require("path");

const ignoredProps = ['as', 'css', 'theme', 'ref'];

const storybookDocGenRule = () => ({
  test: /\.(tsx|ts)?$/,
  use: [
    {
      loader: require.resolve('react-docgen-typescript-loader'),
      options: {
        propFilter: prop => {
          if (ignoredProps.includes(prop.name)) {
            return false;
          }

          if (prop.parent) {
            return (
              !prop.parent.fileName.includes('node_modules/@types/react/') &&
              !prop.parent.fileName.includes('@types/styled-system')
            );
          }

          return true;
        },
      },
    },
  ],
  exclude: /node_modules/,
});

module.exports = ({ config }) => {
  config.context = (path.join(__dirname, '../'));

  config.module.rules =[
    tsRule({configFileName: path.join(__dirname, '../tsconfig.json'),
    include: [path.join(__dirname, '../stories')]}),
    storybookDocGenRule(),
    jsRule(browserProdConfig),
    storyRule,
    cssRule,
    config.module.rules[1]];

  config.resolve.extensions.push(".ts", ".tsx");

  config.resolve.alias = {
    '.........../styleguide': path.resolve(styleguideContext)
  };
  return config;
};

My storybook config

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';
import { bootstrap } from '............./styleguide';
import {StoryContainer} from "../stories/storyComponents/StoryContainer";

bootstrap();

const storyBookDecorators = [
  withKnobs,
  withOptions({
    name: `@............/styleguide`,
    url: 'https://github.com/........./.........../tree/master/styleguide',
    hierarchyRootSeparator: /\|/,
  }),
];

addDecorator(Story =>
  <StoryContainer>
    <Story />
  </StoryContainer>
);

storyBookDecorators.forEach(addon => addDecorator(addon));

configure(require.context('../stories', true, /\.story\.(jsx|ts|js|tsx)?$/), module);

My Presets:

const path = require("path");

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {
        babelrc: path ,
        presets: [],
        plugins: ['emotion'],
      },
      sourceLoaderOptions: null,
    },
  },
  {
    name: "@storybook/preset-typescript",
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
      },
      include: [path.resolve(__dirname, "../stories")]
    }
  }
];

Would love to know how i can avoid this since it is blocking our upgrade to the new docgen feature.

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

[shilman]

@EdenTurgeman That's pretty strange. Did you figure it out? A couple comments:

1. the main difference between all and the other stories is that you're not using all.story = { ... } but you are for the others. Do the others work if you remove the .story from them?

2. your addDecorator re-definition looks a little weird to me. since you're applying it multiple times you're getting multiple StoryContainers. Is that intended?

[EdenTurgeman]

@shilman
1.YES! if i remove the .story from them, my snapshotting works fine, any idea why this could be?

1. Can you explain? i must be mixing something up, i apply the <StoryContainer> in a seperate line. and our addons in another, is there a multiplication?

[shilman]

cc @Hypnosphi on the .story issue in storyshots. Any idea what's going on?

[Hypnosphi]

storyshots-puppeteer infers id from name which doesn't work if name is different from export name. I'll change that to getting id directly from context.

We should also check and probably replace other toId() usages. @shilman can you or someone else do that?

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.7 containing PR #9291 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[EdenTurgeman]

@shilman AMAZING WORK. thank you so much for that!

[shilman]

Thank @Hypnosphi 👏