storybook: [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.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 19 (6 by maintainers)

Most upvoted comments

“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.

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)'],

We just bumped into this error due to use of Storybook Docs Table of Content addon image

Fix was to use Jest’s moduleNameMapper and map references of @storybook/addon-docs/blocks to @storybook/addon-docs:

In your jest config: image

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.21 containing PR #14841 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

Thanks @kylegach. I’ve updated everything as suggested in https://github.com/storybookjs/storybook/pull/14841

If people are running into this problem, they can use your workaround for 6.2 or update their code to 6.3. I don’t want to back-port the changes to 6.2 because I’d like to let it bake for a bit anyway, and by that time we should already be releasing 6.3 stable.

@kylegach May work, I’ll test. But honestly, I don’t really understand why I should do any change on my project.

This is a minor release, should not it be breaking changes free? 🤔

Note: Good catch for the <details> tip, didn’t think about that! 😉