[BUG][6.2.0-alpha] Snapshots tests failing

Describe the bug

I updated my Angular project to Storybook 6.2.0-alpha using npx sb@next upgrade --prerelease . When running npm run test to test the snapshots, the terminal outputs the following error message :

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

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/geromegrignon/Documents/workspace/open-source/seed-starter/node_modules/@storybook/addon-docs/dist/esm/frameworks/angular/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './compodoc';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@storybook/addon-docs/angular/index.js:1:107)

To Reproduce Steps to reproduce the behavior:

1. Clone the following project : https://github.com/geromegrignon/seed-starter/tree/storybook-6.2.0
2. switch to storybook-6.2.0 branch
3. run npm run test

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System

Environment Info:

  System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 81.0.1
    Safari: 14.0.2
  npmPackages:
    @storybook/addon-actions: ^6.2.0-alpha.8 => 6.2.0-alpha.8 
    @storybook/addon-docs: ^6.2.0-alpha.8 => 6.2.0-alpha.8 
    @storybook/addon-essentials: ^6.2.0-alpha.8 => 6.2.0-alpha.8 
    @storybook/addon-links: ^6.2.0-alpha.8 => 6.2.0-alpha.8 
    @storybook/addon-storyshots: ^6.2.0-alpha.8 => 6.2.0-alpha.8 
    @storybook/angular: ^6.2.0-alpha.8 => 6.2.0-alpha.8 

Additional context Add any other context about the problem here.

[kylegach]

I also ran across this when upgrading from 6.1.21 to 6.2.7. I think it may be less of a bug and more of a lack of documentation issue?

I tracked the change down to 6.2.0-alpha.20, which introduced the “module” field in a bunch of Storybook package’s package.json (e.g. the change for @storybook/addon-docs), which means all those packages are now distributed as ESM as well as CommonJS (the “main” field).

No mention of it in the release, though: https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.20

Anyway, to workaround it, you need to tell Jest to transform the files, as they are now ESM (why Jest even tries to use ESM when CommonJS is available is a mystery to me). Using transformIgnorePatterns:

transformIgnorePatterns: ['/node_modules/(?!@storybook)'],

[kylegach]

“why Jest even tries to use ESM when CommonJS is available is a mystery to me”

This is unexpected indeed 😦

My lack of understanding was bothering me. So, through a combination of topic searching and git blame’ing, I believe this issue is due to a deep import from '@storybook/addon-docs/blocks' and jest not being able to infer the CJS entrypoint from that location (see this helpful comment). That makes it related to (if not a duplicate of) #14602, which was fixed by #14769, which was released in 6.3.0-alpha.18. I confirmed that the following steps worked (for me, at least):

1. Update all @storybook packages (though maybe only @storybook/addon-docs is necessary) to at least 6.3.0-alpha.18
2. Remove transformIgnorePattern, as documented above and on MIGRATION.md
3. Change all imports from '@storybook/addon-docs/blocks' to '@storybook/addon-docs'

@shilman — I’m guessing you’d alleviate a lot of grief by back-porting that PR into a 6.2.* release (if you think that’s a relatively straightforward effort, I’m happy to try). It was 6.2.20, after all, which introduced ESM, which then surfaced this issue. You could then revert #14806, if you wish.