initStoryShots, jest can't parse sample mdx file

Describe the bug @storybook/addon-docs/jest-transform-mdx can’t properly transform sample mdx file for jest

To Reproduce

1. npx sb init
2. jest.config.js

module.exports = {
  transform: {
    '^.+\\.[jt]sx?$': 'babel-jest',
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.svg$': 'jest-svg-transformer',
    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
  },
};

1. babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
};

1. test case

import initStoryShots from '@storybook/addon-storyshots';
initStoryShots();

1. yarn jest Expected behavior no error

Error log

    Example/Button
      ✓ Primary (12 ms)
      ✓ Secondary (1 ms)
      ✓ Large (1 ms)
      ✓ Small (1 ms)
    Example/Header
      ✓ Logged In (2 ms)
      ✓ Logged Out (1 ms)
    Example/Page
      ✓ Logged In (2 ms)
      ✓ Logged Out (2 ms)

  console.warn
    Unexpected error while loading ./stories/Introduction.stories.mdx: SyntaxError: Unexpected token 'export'

      at Object.warn (../../../node_modules/@storybook/client-logger/dist/cjs/index.js:63:73)
      at ../../../node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:101:34
          at Array.forEach (<anonymous>)
      at ../../../node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:94:20
          at Array.forEach (<anonymous>)
      at ../../../node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:93:12
      at ConfigApi.configure (../../../node_modules/@storybook/core-client/node_modules/@storybook/client-api/dist/cjs/config_api.js:26:7)

System Environment Info:

System: OS: macOS 10.15.7 CPU: (8) x64 Intel® Core™ i5-1038NG7 CPU @ 2.00GHz Binaries: Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.11 - ~/.nvm/versions/node/v12.20.1/bin/npm Browsers: Chrome: 89.0.4389.128 Safari: 14.0.3

[saranrapjs]

Spent some time today looking into this with the help of a coworker, and it looks like this broke when the @storybook/addon-docs package changed its “deep export” blocks.js file to point to the ESM flavor of that file:

https://github.com/storybookjs/storybook/blob/416944c1f91335513d832ebe7018689530c6bbd0/addons/docs/blocks.js#L1

This confuses Jest, the storyshots runner, because MDX compiler plugin in Storybook ends up generating ESM flavored javascript importing the “deep” import:

https://github.com/storybookjs/storybook/blob/416944c1f91335513d832ebe7018689530c6bbd0/addons/docs/src/mdx/mdx-compiler-plugin.js#L461-L469

…which ends up un-transformed by babel-jest because it lives in node_modules.

There are a few different workarounds; it may be possible to tweak your jest config to transform this storybook module and any which import it so that it’s still transpiled. But this seems like a packaging bug, and shouldn’t be this way. Will try to see if there’s a straightforward patch if I have time.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.18 containing PR #14769 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.