Getting "Cannot use import statement outside a module" with MDX files running with Jest #11376

ajkl2533 · 2020-07-01T13:10:15Z

Describe the bug
When I add MDX documentation files into my Storybook and run Storyshots with Jest I'm getting SyntaxError: Cannot use import statement outside a module for each of loaded MDX.

Expected behavior
Console should be without errors

Code snippets

console.warn
    Unexpected error: SyntaxError: Cannot use import statement outside a module

      at Object.warn (node_modules/@storybook/client-logger/dist/index.js:53:73)
      at node_modules/@storybook/core/dist/client/preview/loadCsf.js:110:34
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core/dist/client/preview/loadCsf.js:103:20
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core/dist/client/preview/loadCsf.js:102:12
      at ConfigApi.configure (node_modules/@storybook/client-api/dist/config_api.js:27:7)

//jest.config.js

module.exports = {
  roots: ['./src'],
  setupFilesAfterEnv: ['./jest.setup.ts'],
  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
  testPathIgnorePatterns: ['node_modules/'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
  },
  testMatch: ['./**/*.(test).(ts|tsx)'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'identity-obj-proxy',
  },
};

// main.ts

module.exports = {
  stories: ['../src/**/*.stories.@(tsx|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-docs'],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

//storyshots/jest.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const { mergeRight } = require('ramda');
const globalJestConfig = require('../jest.config');
/* eslint-enable */

const storyshotsJestConfig = {
  rootDir: path.join(__dirname, '..'),
  roots: ['./storyshots'],
  testMatch: ['./**/storyshots.runner.ts'],
};

module.exports = mergeRight(globalJestConfig, storyshotsJestConfig);

// storyshots/storyshots.runner.ts
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

const pathToStorybookStatic = path.join(__dirname, '../storybook-static');

const beforeScreenshot = () => {
  return new Promise(
    (resolve) =>
      setTimeout(() => {
        resolve();
      }, 1000), // sometimes text doesn't render in time, so we wait one second for each image
  );
};

initStoryshots({
  suite: 'Image snapshots',
  storyNameRegex: /^((?!.*?DontTest).)*$/,
  framework: 'react',
  configPath: path.join(__dirname, '../.storybook'),
  test: imageSnapshot({
    beforeScreenshot,
    storybookUrl:
      process.env.CI === 'true'
        ? `file://${pathToStorybookStatic}`
        : `http://host.docker.internal:6006`,
    getMatchOptions: () => ({
      failureThreshold: 0.0,
      failureThresholdType: 'percent',
    }),
  }),
});

System:

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/Documents/PROJECTS/ambrosia-design-system/node_modules/.bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.36 => 6.0.0-beta.37 
    @storybook/addon-docs: ^6.0.0-beta.36 => 6.0.0-beta.37 
    @storybook/addon-storyshots: ^6.0.0-beta.36 => 6.0.0-beta.37 
    @storybook/addon-storyshots-puppeteer: ^6.0.0-beta.36 => 6.0.0-beta.37 
    @storybook/react: ^6.0.0-beta.36 => 6.0.0-beta.37 
    @storybook/theming: ^6.0.0-beta.36 => 6.0.0-beta.37

The text was updated successfully, but these errors were encountered:

stale · 2020-07-25T04:39:07Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

ajkl2533 · 2020-07-28T08:53:14Z

@shilman Any update on this?

stale · 2020-08-22T20:08:11Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

shilman · 2020-09-24T07:12:38Z

Nope, would appreciate if someone else can take a look. @Hypnosphi do you have any ideas?

Hypnosphi · 2020-09-24T12:29:33Z

@ajkl2533 you also need babel-jest: https://github.com/storybookjs/storybook/tree/next/addons/docs#installation

bogdanorzea · 2020-09-26T05:17:30Z

I have the same problem when running Jest after enabling the storyshot addon. It can also be reproduced on the 'sb init' project.

topcheese · 2020-11-03T01:36:02Z

I just discovered this project, so I pretty much don't know what I'm doing. I got this error because my .babel file wasn't in the root directory of the project. I know nothing about Babel, but I'd make sure that's straight.
I'm trying to follow along with the Svelte /SBV6 tutorials.

miguelangeltorresfp · 2020-12-08T19:46:30Z

@ajkl2533 Did you get this to work with ts-jest ?

oxilor · 2021-01-10T05:06:10Z

I replaced ts-jest to babel-jest and the error was disappear.

1. Install the babel

yarn add -D babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript

2. Create the `jest.transform.js` file

module.exports = require('babel-jest').createTransformer({
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
});

3. Add `transform` to your `jest.config.js`

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[tj]sx?$': './jest.transform.js',
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
  },
};

cherylcarpenter · 2021-01-18T23:04:50Z

@oxilor this did not fix for me :(

kylemh · 2021-07-13T22:20:51Z

So we can't use ts-jest? I wouldn't consider TSDX an active project anymore, but a lot of people obviously still use it and are stuck with ts-jest @shilman

oxilor · 2021-07-13T22:26:44Z

I have the latest version of the Storybook and this way still works.

kylemh · 2021-07-13T22:46:19Z

It appears #13478 was my actual problem.

oxilor · 2021-07-14T00:56:26Z

I created a repo with configuration that works for me, but in this project storyshots started to include Storybook's stories from node_modules. In my real project it works nice. Unfortunately, I don't have time to deal with this problem. If someone knows how to fix it, let me know.

jeremyzilar · 2021-09-24T22:24:18Z

The config that @oxilor shared seems to work 🤞
also ensure the your packages are up to date!

K3TH3R · 2022-06-08T06:31:34Z

My repo's setup to use CSF for Stories with MDX for docs. Because my MDX is only for docs, I don't actually need the MDX for my unit tests so I can just tell Jest to throw it away:

jest.config.js

module.exports = {
  moduleNameMapper: {
    '\\.mdx?$': '<rootDir/__mocks__/mdxMock.js',
  }
}

mocks/mdxMock.js

module.exports = {}

ndelangen · 2023-01-17T23:16:17Z

The future of storyshots is the test-runner:
https://storybook.js.org/docs/react/writing-tests/test-runner#page-top

And use the play function for expectations:
https://storybook.js.org/docs/react/writing-stories/play-function#page-top

We will not be making any improvement / changes to storyshots.

squidjam · 2023-05-09T10:48:30Z

We will not be making any improvement / changes to storyshots.

As a suggestion, if this is how it will go forward, please update the documentation on your website, as it states that Snapshots is an alternative to Chromatic.

For a self-managed alternative to Chromatic, we offer StoryShots. It allows you to run visual tests on stories by integrating with jest-image-snapshot.

It will be simpler and we won't need to invest time to try and implement it only to have it not work and spend a couple of hours trying to find a solution on search engines.

Also, perhaps you can add a notice to the README on Storyshots and archive the repo.

ricovitch · 2023-08-17T10:02:50Z

@ndelangen what about puppeteer integration for visual regression snapshots ? Will it be supported by test-runner approach ? We currently use @storybook/addon-storyshots-puppeteer for the job.

shilman added addon: storyshots mdx question / support labels Jul 2, 2020

stale bot added the inactive label Jul 25, 2020

stale bot removed the inactive label Jul 28, 2020

stale bot added the inactive label Aug 22, 2020

stale bot removed the inactive label Sep 23, 2020

shilman added the P3 label Sep 24, 2020

hrb-kato-kenta mentioned this issue Jan 9, 2021

Storybook v6 migration hrbrain/temaki-archive#208

Merged

shilman removed the P3 label Oct 18, 2022

ndelangen closed this as completed Jan 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting "Cannot use import statement outside a module" with MDX files running with Jest #11376

Getting "Cannot use import statement outside a module" with MDX files running with Jest #11376

ajkl2533 commented Jul 1, 2020

stale bot commented Jul 25, 2020

ajkl2533 commented Jul 28, 2020

stale bot commented Aug 22, 2020

shilman commented Sep 24, 2020

Hypnosphi commented Sep 24, 2020

bogdanorzea commented Sep 26, 2020

topcheese commented Nov 3, 2020 •

edited

Loading

miguelangeltorresfp commented Dec 8, 2020

oxilor commented Jan 10, 2021

cherylcarpenter commented Jan 18, 2021

kylemh commented Jul 13, 2021

oxilor commented Jul 13, 2021 •

edited

Loading

kylemh commented Jul 13, 2021 •

edited

Loading

oxilor commented Jul 14, 2021

jeremyzilar commented Sep 24, 2021

K3TH3R commented Jun 8, 2022

ndelangen commented Jan 17, 2023

squidjam commented May 9, 2023 •

edited

Loading

ricovitch commented Aug 17, 2023

Getting "Cannot use import statement outside a module" with MDX files running with Jest #11376

Getting "Cannot use import statement outside a module" with MDX files running with Jest #11376

Comments

ajkl2533 commented Jul 1, 2020

stale bot commented Jul 25, 2020

ajkl2533 commented Jul 28, 2020

stale bot commented Aug 22, 2020

shilman commented Sep 24, 2020

Hypnosphi commented Sep 24, 2020

bogdanorzea commented Sep 26, 2020

topcheese commented Nov 3, 2020 • edited Loading

miguelangeltorresfp commented Dec 8, 2020

oxilor commented Jan 10, 2021

1. Install the babel

2. Create the jest.transform.js file

3. Add transform to your jest.config.js

cherylcarpenter commented Jan 18, 2021

kylemh commented Jul 13, 2021

oxilor commented Jul 13, 2021 • edited Loading

kylemh commented Jul 13, 2021 • edited Loading

oxilor commented Jul 14, 2021

jeremyzilar commented Sep 24, 2021

K3TH3R commented Jun 8, 2022

jest.config.js

mocks/mdxMock.js

ndelangen commented Jan 17, 2023

squidjam commented May 9, 2023 • edited Loading

ricovitch commented Aug 17, 2023

topcheese commented Nov 3, 2020 •

edited

Loading

2. Create the `jest.transform.js` file

3. Add `transform` to your `jest.config.js`

oxilor commented Jul 13, 2021 •

edited

Loading

kylemh commented Jul 13, 2021 •

edited

Loading

squidjam commented May 9, 2023 •

edited

Loading