Doesn't seem to work with Storyshots

[schontz]

When using Storyshots, the stories that rely on the modified CRA config are not detected.

[danielknell]

can you provide a minimal example of this happening?

[schontz]

Yes. I am using tsyringe in my app, so I have the following in craco.config.js:

  babel: {
    // Prevent babel from stripping certain TS metadata
    // cf. https://github.com/microsoft/tsyringe/issues/29#issuecomment-652596008
    plugins: [
      'babel-plugin-transform-typescript-metadata',
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
    ],
    presets: ['@babel/preset-typescript'],
  },

The dependency container stores all of my services, which I expose to React with something like:

// services.jsx
const ServiceContext = React.createContext(container);

const ServiceProvider = ({ value, children }) => (
  <ServiceContext.Provider value={value}>{children}</ServiceContext>
);

const useServices = () => useContext(ServiceContext);

// SomeComponent.jsx
const SomeComponent = (props) => {
  const { api } = useServices();
  const handleClick = () => api.getData.then(...);
  return <button onClick={handleClick}>Click Me</button>;
}

To give all my components the context in Storybook, I setup the following in .storybook/preview.js:

export const decorators = [
  (Story) => (
    <ServiceProvider value={someValue}>
      <Story />
    </ServiceProvider>
  ),
];

This works fine when viewing the stories in the browser, but when testing with Storyshots (via Jest), the stories using the context get skipped.

Unit tests that use tsyringe outside of React have no issue.

And I've check that the config jest uses does include the decorator info (via --showConfig):

      "babel": {
        "plugins": [
          "babel-plugin-transform-typescript-metadata",
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ],
          [
            "@babel/plugin-proposal-class-properties",
            {
              "loose": true
            }
          ]
        ],
        "presets": [
          "@babel/preset-typescript"
        ]
      },

[schontz]

Some further investigation shows that Storyshots is just skipping some stories, even when things are vanilla CRA. Closing.