Unexpected Token Import Running Jest with Storyshots, Docs, and MDX

Describe the bug When running jest with .stories.mdx files in storybook@5.3 and @storybook/addon-storyshots, returns error

.../storybook-docs/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsx from "refractor/lang/jsx.js";
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)

I’ve looked through many other open issues that are related, but haven’t found anyone reporting this specific error (and other’s solutions have not resolved it for me).

To Reproduce Steps to reproduce the behavior: I’ve created a minimum reproducible example here with barebones configs to isolate the issue: https://github.com/davidgolden/storybook-mdx-issue

To reproduce:

1. git clone https://github.com/davidgolden/storybook-mdx-issue.git storybook-mdx-issue
2. cd storybook-mdx-issue
3. npm ci
4. npm run test

Expected behavior npm run test to execute without error

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 72.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-docs: ^5.3.3 => 5.3.3 
    @storybook/addon-storyshots: ^5.3.3 => 5.3.3 
    @storybook/react: ^5.3.3 => 5.3.3

Relevant Code Snippets main.js:

module.exports = {
    stories: ["../**/*.stories.(jsx|mdx)"],
    addons: [
        '@storybook/addon-docs',
    ],
};

babel.config.js:

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

jest.config.js:

module.exports = {
    "transform": {
        '^.+\\.jsx?$': 'babel-jest',
        "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx",
    },
};

Storyshots.test.js:

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

[mAAdhaTTah]

Looking at the PR, if you’re running into this issue, you can use this in moduleNameMapper: 'react-syntax-highlighter/dist/esm/(.*)': 'react-syntax-highlighter/dist/cjs/$1', which will remap the esm requires to cjs ones. This got me around the issue until the PR is merged and released.

[roadev]

I’m having the same issue, even using the lastest version (alpha 19)