initStoryShots, jest can't parse sample mdx file

[kdong007]

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',
  },
};

3. babel.config.js

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

4. test case

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

5. 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(R) Core(TM) 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

[PilotConway]

I'm running into this same issue. I printed the underlying stack trace from the error being thrown which contains some more info on where the export is coming from (this is from a console.trace(error) placed at line 101 in loadCsf.js) which I pasted below.

What's odd is I have other mdx files in a different directory that have been able to load without any issues. Working on trying to isolate if something in particular is causing it, but this is at least what I found so far.

console.error
    Trace: 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:
    
    /node_modules/@storybook/addon-docs/blocks.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './dist/esm/blocks';
                                                                                             ^^^^^^
    
    SyntaxError: Unexpected token 'export'
        at new Script (node:vm:99:7)
        at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1360:14)
        at Runtime._execModule (node_modules/jest-runtime/build/index.js:1251:25)
        at Runtime._loadModule (node_modules/jest-runtime/build/index.js:898:12)
        at Runtime.requireModule (node_modules/jest-runtime/build/index.js:746:10)
        at Runtime.requireModuleOrMock (node_modules/jest-runtime/build/index.js:919:21)
        at Object.<anonymous> (stories/Card.stories.js:6:1)
        at Runtime._execModule (node_modules/jest-runtime/build/index.js:1309:24)
        at Runtime._loadModule (node_modules/jest-runtime/build/index.js:898:12)
        at Runtime.requireModule (node_modules/jest-runtime/build/index.js:746:10)
        at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:101:21
        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/client-api/dist/cjs/config_api.js:26:7)
        at Object.configure (node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:286:17)
        at Object.configure (node_modules/@storybook/react/dist/cjs/client/preview/index.js:35:24)
        at Object.configure [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/configure.js:89:19)
        at Object.load (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react/loader.js:24:24)

      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:101:21
          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/client-api/dist/cjs/config_api.js:26:7)

[mokargas]

I've had some variation of this for the last month or so, identical environment. I even tried excluding .mdx files entirely, but jest still picks them up

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

storybook/addons/docs/blocks.js

Line 1 in 416944c

export * from './dist/esm/blocks';

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

storybook/addons/docs/src/mdx/mdx-compiler-plugin.js

Lines 461 to 469 in 416944c

	const fullJsx = [
	'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
	defaultJsx,
	...storyExports,
	`const componentMeta = ${stringifyMeta(metaExport)};`,
	`const mdxStoryNameToKey = ${JSON.stringify(context.storyNameToKey)};`,
	wrapperJs,
	'export default componentMeta;',
	].join('\n\n');

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

@saranrapjs thanks for tracking this down. i've put together a proposed fix at #14769, can you take a look, and ideally add a test case to the monorepo to exercise this change?

[saranrapjs]

@shilman I wasn't able to find a way to write a test against this, because the behavior that's failing (Jest isn't able to parse MDX generated files) isn't observe-able within Jest tests run within the Storybook repo. Must be some kind of Jest runner/node environment issue.

I was able to confirm this change fixes the issue using a kind of more basic tactic, though... running this throws both on your draft branch and on next:

node -e "require('@storybook/addon-docs/blocks')"

...however, on your branch, running this doesn't throw:

node -e "require('@storybook/addon-docs')"

There's one other thing: I think for your fix to work, the "deep" import path needs to repointed from where it's currently referenced in the MDX compiler. Here's a patch I submitted to your branch with that in place.

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