[addon-storyshots] storyshots found 0 stories: TypeError: Cannot destructure property 'instrument' of 'undefined' as it is undefined.

Describe the bug A clear and concise description of what the bug is.

I upgraded jest from 26.6.3 to 27.0.6. All other tests are passing (after adding testEnvironment: 'jest-environment-jsdom', to my jest.config.js), its only the storybook snapshots that are failing.

 FAIL  tests/Storyshots.test.js
  ● Test suite failed to run

    storyshots found 0 stories

      18 | });
      19 |
    > 20 | initStoryshots({
         | ^
      21 |   configPath: path.resolve(__dirname, '../.storybook'),
      22 |   framework: 'react',
      23 |   // integrityOptions: { cwd: path.resolve(__dirname, '../stories') },

      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:86:15)
      at Object.<anonymous> (tests/Storyshots.test.js:20:1)

  console.warn
    Unexpected error while loading ./components/Alert.stories.js: TypeError: Cannot destructure property 'instrument' of 'undefined' as it is undefined.

      at Object.warn (node_modules/@storybook/client-logger/dist/cjs/index.js:67:65)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:92:34
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:85:20
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:84:12
      at ConfigApi.configure (node_modules/@storybook/client-api/dist/cjs/config_api.js:26:7)

To Reproduce Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions. Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

System Please paste the results of npx sb@next info here.

=^.^= npx sb@next info

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-a11y: ^6.3.7 => 6.3.7 
    @storybook/addon-essentials: ^6.3.7 => 6.3.7 
    @storybook/addon-links: ^6.3.7 => 6.3.7 
    @storybook/addon-storyshots: ^6.3.7 => 6.3.7 
    @storybook/addon-storysource: ^6.3.7 => 6.3.7 
    @storybook/addons: ^6.3.7 => 6.3.7 
    @storybook/builder-webpack5: ^6.3.7 => 6.3.7 
    @storybook/core: ^6.3.7 => 6.3.7 
    @storybook/manager-webpack5: ^6.3.7 => 6.3.7 
    @storybook/react: ^6.3.7 => 6.3.7 
    @storybook/source-loader: ^6.3.7 => 6.3.7 

=^.^= 

Additional context Add any other context about the problem here.

I tried to reproduce it with the new repo but I’m going to have to come back to that in a bit >_<

[Tiberriver256]

Any workaround for getting Jest 27 to work with mdx stories?

[glrodasz]

I got this issue a few days back when I try to update all my dependencies, looks like StoryShots is not compatible with Jest 27 and beyond.

But because of this answer and this discussion https://github.com/storybookjs/storybook/discussions/18119 I wanted to try the approach of using @storybook/react-testing to bring the composed stories and “manually” create DOM snapshots with Jest.

It went well but still required to create a test file per component, so I refactored my approach and manage to have similar result as StoryShots and this is my final file: https://github.com/glrodasz/cero-components/blob/master/storybook.test.js

The config is still specified for my project but maybe can help you

What I’m doing is the following:

1. Load all the story files and resolved their modules import
2. Loop over the stories of each component and take the CSF stories to use composeStories from @storybook/testing-react
3. Create individual snapshot files using jest-specific-snapshot

If you were using StoryShots only to create DOM snapshots this will do the same for you without StoryShots addon.