Storyshots fails with MDX stories via docs addon #7223

danielknell · 2019-06-28T09:21:16Z

Describe the bug
If you try and use storyshots while using the docs addon, jest will try and import the MDX file, which will result in syntax errors (it not understanding markdown code and all)

To Reproduce
Steps to reproduce the behavior:

Enable docs technical preview
Setup storyshots
Create an based MDX story
Run jest

Expected behavior
Jest should create snapshots based on stories in MDX file like it does for jsx/tsx files or ignore them.

System:

OS: ubuntu
Device: N/A
Browser: N/A
Framework: react
Addons: docs, storyshots
Version: 5.2.0-alpha.29

Additional context

Not really that important as it's in alpha and i'm just poking at what the future might look like, but will probably cause lots of confusion after a stable release, the docs addon is awesome btw, looking forward to the final version.

I am thinking a webpack loader will be needed to transform the MDX a regular JSX file defining the stories?

shilman · 2019-06-28T16:25:24Z

This is also blocking this PR #7222 so we'll need to deal with it sooner rather than later.

shilman · 2019-06-29T00:41:25Z

@danielknell For now, I just added the mdx file to a list of fileMock files, so it effectively skips the test. Not a very good workaround, but it unbreaks storyshots.

There's already a webpack loader that transforms the stories into JSX. Do you have any interest in trying to get that working for jest? I probably don't have time to look at this much more for awhile, but I'd be happy to answer questions if you want to tackle it. The webpack setup is here: https://github.com/storybookjs/storybook/blob/next/addons/docs/common/preset.js

rwieruch · 2019-07-03T11:58:11Z

Out of curiosity: Will Storyshots still work with MDX files? E.g. for

import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';

<Meta title='MDX|Button' />

# Hello Docs

Welcome to the future of Storybook!

<Story name="hello">
  <Button onClick={action('clicked')}>Hello button!</Button>
</Story>

<Story name="with emoji">
  <Button onClick={action('clicked')}>🤘🚀💯</Button>
</Story>

so that both stories get picked up?

shilman · 2019-07-04T04:43:58Z

@rwieruch See my comment
#7223 (comment)

If we fileMock MDX files they will be ignored and the stories won't be picked up
If we write a jest transformation (equivalent to a webpack loader) or figure out how to adapt the webpack loader, these stories will be snapshotted. However, it requires investigation (help wanted!)

danielknell · 2019-07-04T11:05:09Z

const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");
const mdx = require("@mdx-js/mdx");
const babel = require("babel-jest");
const deasyncPromise = require("deasync-promise");

const compilers = [createCompiler({})];

module.exports = {
  process(src, filename, config, options) {
    let result = deasyncPromise(
      mdx(src, { compilers: compilers, filepath: filename }),
    );

    result = `/* @jsx mdx */
    import React from 'react'
    import { mdx } from '@mdx-js/react'
    ${result}
    `;

    return babel.process(result, filename, config, options);
  },
};

hacky as fuck but seems to work...?

using the following in jest config

{
  "transform": {
    "^.+\\.[tj]sx?$": "babel-jest",
    "^.+\\.mdx?$": "<rootDir>mdx.loader.js",
  }
}

shilman · 2019-07-04T11:14:36Z

Nice @danielknell. Would somebody mind putting that into a PR as @storybook/addon-docs/jest-transform.js or the like?! 🙀

danielknell · 2019-07-04T11:17:28Z

@shilman it assumes you are using babel-jest, is that a safe assumption? thats also probably not the right way to chain jest transforms either but i couldn't see any other ways in the docs...

shilman · 2019-07-06T22:44:14Z

@danielknell I think we could require users to use babel-jest if that's what's needed to make it work? Obviously the fewer requirements the better tho.

danielknell · 2019-07-06T22:57:51Z

i looked into it more and it seems that is how other people chain transforms, and there was some unneeded stuff in there, so i've updated the comment and wrapped it up in a pr

aendra-rininsland · 2019-09-18T22:07:12Z

Just a note re: the above code snippet if you're using it while waiting for #7330 to drop, you don't need to use deasync-promise, just use mdx.sync instead of mdx.

See: #7330 (comment)

shilman · 2019-10-24T15:16:07Z

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.27 containing PR #8189 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

shilman · 2019-10-24T15:22:04Z

Finished except for instrumenting vue-kitchen-sink, which I'll follow up with in #8557

hisapy · 2020-03-02T19:19:08Z

Hi, I have just installed Storybook 5.3.14, addon-docs and addon-storyshots and tried to run Storyshot.test.js, all of it as given in the instructions for this version, but it fails with

storyshots found 0 stories

I have only one story in src/Home

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import { Home } from "./Home";

<Meta title="Home" component={Home} />

# Home

The Home

<Preview>
  <Story name="Home">
    <Home />
  </Story>
</Preview>

Just for the record, .js format works

import React from "react";
import { Home } from "./Home";

export default {
  component: Home,
  title: "Home"
};

export const base = () => <Home />;

I debugged it a little bit and found that storybook.raw() length is 0 in https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/src/api/index.ts line 51 at the time of this writing, so maybe the culprit is in the loadFramework function.

Yama-Tomo · 2020-03-10T02:58:55Z

storyshots found 0 stories

I faced a similar problem in CRA.
I tried fix problem. Try the following steps.

check jest transform ordering

$ yarn test --showConfig
... snip ...
"transform": [
  [
    "^.+\\.mdx$",   <------ check ordering before `fileTransform`
    "/path/to/project/node_modules/@storybook/addon-docs/jest-transform-mdx.js"
  ],
  [
    "^.+\\.(js|jsx|ts|tsx)$",
    "/path/to/project/node_modules/react-app-rewired/scripts/utils/babelTransform.js"
  ],
  [
    "^.+\\.css$",
    "/path/to/project/node_modules/react-scripts/config/jest/cssTransform.js"
  ],
  [
    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)",
    /path/to/project/node_modules/react-scripts/config/jest/fileTransform.js"
  ]
],

modify node_modules/@storybook/addon-docs/jest-transform-mdx.js

@@ -29,6 +29,6 @@
       import { mdx } from '@mdx-js/react'
       ${mdx.sync(src, { compilers, filepath: filename })}
     `;
-    return getNextTransformer(filename, config).transformSource(filename, result, instrument);
+    return getNextTransformer(filename, config).transformSource(filename + '.jsx', result, instrument);
   },
 };

☝️ I don't know if this is a bug. It might be better to create custom transformer.

modify node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js

@@ -51,17 +51,17 @@
 var _memoizerific = _interopRequireDefault(require("memoizerific"));
-var _jsx = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/jsx"));
+var _jsx = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/jsx"));
-var _bash = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/bash"));
+var _bash = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/bash"));
-var _css = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/css"));
+var _css = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/css"));
-var _markup = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/markup"));
+var _markup = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/markup"));
-var _tsx = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/tsx"));
+var _tsx = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/tsx"));
-var _typescript = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/typescript"));
+var _typescript = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/typescript"));
 var _reactSyntaxHighlighter = require("react-syntax-highlighter");

fixed in v6.0.0-alpha.7 (#9780)

CjChoiNZ · 2020-03-19T21:46:24Z

@Yama-Tomo Do you mean the mdx ordering should be moved to top from transform?

Yama-Tomo · 2020-03-20T08:25:08Z

@CjChoiNZ Yes. (no problem anywhere before fileTransform.js

lauthieb · 2020-03-20T13:56:03Z

Same error. "storyshots found 0 stories" :-(

CjChoiNZ · 2020-03-21T11:27:03Z

@Yama-Tomo
hmm...I modified the node_modules/@storybook/addon-docs/jest-transform-mdx.js as your suggest.

...
return getNextTransformer(filename, config).transformSource(filename + '.jsx', result, instrument);

And confirmed use this path dist/cjs but it doesn't work for me.

I defined the jest from my package.json as below.

 "jest": {
    "transform": {
      "^.+\\.[tj]sx?$": "babel-jest",
      "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
    },
    "transformIgnorePatterns": [
      "/node_modules/"
    ]
  },

And the result of transform still displays mdx is bottom.

...
 "transform": [
        [
          "^.+\\.(js|jsx|ts|tsx)$",
          "C:\\Users\\CjChoi\\Workspace\\product-core\\node_modules\\react-scripts\\config\\jest\\babelTransform.js"
        ],
        [
          "^.+\\.css$",
          "C:\\Users\\CjChoi\\Workspace\\product-core\\node_modules\\react-scripts\\config\\jest\\cssTransform.js"
        ],
        [
          "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)",
          "C:\\Users\\CjChoi\\Workspace\\product-core\\node_modules\\react-scripts\\config\\jest\\fileTransform.js"
        ],
        [
          "^.+\\.[tj]sx?$",
          "C:\\Users\\CjChoi\\Workspace\\product-core\\node_modules\\babel-jest\\build\\index.js"
        ],
        [
          "^.+\\.mdx$",
          "C:\\Users\\CjChoi\\Workspace\\product-core\\node_modules\\@storybook\\addon-docs\\jest-transform-mdx.js"
        ]
      ],
...

Did I miss something?

Yama-Tomo · 2020-03-22T09:38:14Z

@CjChoiNZ You need to customize the order of transform with the react-app-rewired

config-overrides.js

module.exports = {
  ...
  jest: function (config) {
    ...
    config.transform = {
      '^.+\\.mdx$': '/path/to/transformer(e.g. @storybook/addon-docs/jest-transform-mdx)',
       ...config.transform
    }

    return config
  }
}

CjChoiNZ · 2020-03-22T23:18:12Z

@Yama-Tomo
Cool, I removed the jest configuration from package.json and created a config-overrides.js and then it does work for me. Cheers bro!!

jorisw · 2020-04-08T08:11:27Z

I've tried the config-overrides.js and react-rewire solutions proposed above, and I've tried upgrading to v6.0.0-alpha.31. I'm still getting:

 FAIL  src/tests/storyshots.test.js
  ● Test suite failed to run

    storyshots found 0 stories

      1 | import initStoryshots from "@storybook/addon-storyshots";
      2 | import { imageSnapshot } from "@storybook/addon-storyshots-puppeteer";
      3 | 
    > 4 | initStoryshots({ suite: "Image storyshots", test: imageSnapshot() });
        | ^
      5 | 

      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:96:15)
      at Object.<anonymous> (src/components/tests/storyshots.test.js:4:1)

I've got a button.stories.mdx sitting in the same folder as button.js:

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import { action } from "@storybook/addon-actions";
import { Button } from "./button";

<Meta title="Components/Button" component={Button} />

# Button

This is a demo of a button documentation page.

- This is a text button:

  <Button onClick={action("clicked")}>Hello Button</Button>

- This is a button with emojis:
  <Button onClick={action("clicked")}>
    <span role="img" aria-label="so cool">
      😀 😎 👍
    </span>
  </Button>

My package.json:

{
  "name": "storybook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "react-scripts test",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "styled-components": "^5.1.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.0.0-alpha.31",
    "@storybook/addon-docs": "^6.0.0-alpha.31",
    "@storybook/addon-links": "^6.0.0-alpha.31",
    "@storybook/addon-storyshots": "^6.0.0-alpha.31",
    "@storybook/addon-storyshots-puppeteer": "^6.0.0-alpha.31",
    "@storybook/addons": "^6.0.0-alpha.31",
    "@storybook/preset-create-react-app": "^2.1.1",
    "@storybook/react": "^6.0.0-alpha.31",
    "jest-image-snapshot": "^3.0.1",
    "puppeteer": "^2.1.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "react-test-renderer": "^16.13.1"
  }
}

My .storybook/main.js:

module.exports = {
  stories: ["../src/**/*.stories.(js|mdx)"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true
      }
    }
  ]
};

My jest.config.js:

modules.exports = {
  transform: {
    "^.+\\.[tj]sx?$": "babel-jest",
    "^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
  }
};

Non-MDX stories are picked up and test just fine.

ajkl2533 · 2020-07-11T11:30:14Z

For me also no MDX stories are not picked up but I'm using ts-jest instead of babel-jest not sure if that can be the issue

sashapawcloud · 2020-07-17T11:35:20Z

Faced the same issue recently. Solved by the following trick it package.json:

"scripts": {
  "test": "cross-env NODE_PATH=src react-scripts test --transform='{\"^.+\\\\\\.[tj]sx?$\":\"ts-jest\",\"^.+\\\\\\.mdx?$\":\"@storybook/addon-docs/jest-transform-mdx\"}'",
},

jorgegir · 2020-11-24T17:03:53Z

Just faced this same issue with Storybook v6:

 FAIL  src/Storyshots.test.js
  ● Test suite failed to run

    storyshots found 0 stories

      1 | import initStoryshots from '@storybook/addon-storyshots'
      2 | 
    > 3 | initStoryshots()
        | ^
      4 | 

      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:104:15)
      at Object.<anonymous> (src/Storyshots.test.js:3:1)

latviancoder · 2020-12-07T15:08:54Z

We've encountered the same issue, but it had nothing to do with storybook. In our case the files weren't getting recognised by jest.

Adding this line to jest storyshots config fixed the problem:

moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'mdx'],

https://jestjs.io/docs/en/configuration#modulefileextensions-arraystring

MR-Neto · 2021-01-18T13:59:29Z

As pointed by @Yama-Tomo the order of the transform is important. I am using craco and I had to create an overridePlugin to the jest config.

module.exports = {
  overrideJestConfig: ({ jestConfig }) => {
    jestConfig.transform = {
      ".+\.mdx": `${resolveApp()}/node_modules/@storybook/addon-docs/jest-transform-mdx`,
      ...jestConfig.transform,
    }
    return jestConfig;
  }
};

bhoomij · 2021-03-04T10:23:49Z

@shilman is this fixed now ?
I still get issue with storybook 6.1.X

jest.config.js

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
  },
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'mdx'],
}

AlexandraNicolau10x · 2021-03-23T17:32:10Z

A solution for me was just to simply remove the mock below from our JestSetup file, and just move it in the test which was failing because of storybook.

jest.mock('@storybook/react-native', () => ({
getStorybookUI: jest.fn(),
addDecorator: jest.fn(),
configure: jest.fn(),
}));

shilman added addon: docs addon: storyshots bug labels Jun 28, 2019

shilman added this to the 5.2.0 milestone Jun 28, 2019

shilman added the has workaround label Jun 29, 2019

danielknell mentioned this issue Jul 6, 2019

Addon-docs: Add jest-transform.js to convert .mdx => .js for storyshots #7330

Closed

shilman added the in progress label Jul 10, 2019

shilman modified the milestones: 5.2.0, 5.2.x Sep 23, 2019

ndelangen mentioned this issue Oct 7, 2019

Addon-docs: Jest MDX transform for storyshots #8189

Merged

shilman self-assigned this Oct 7, 2019

shilman closed this as completed Oct 24, 2019

shilman mentioned this issue Oct 24, 2019

Vue-kitchen-sink: Re-enable MDX storyshots #8557

Closed

2 tasks

ajkl2533 mentioned this issue Jul 13, 2020

CSF stories with defined docs are not picked up by Storyshots #11523

Closed

dependencies bot mentioned this issue Jan 15, 2021

Update 10 dependencies from npm #2477

Merged

naporin0624 mentioned this issue Oct 30, 2023

add storyshots pixiv/charcoal#388

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storyshots fails with MDX stories via docs addon #7223

Storyshots fails with MDX stories via docs addon #7223

danielknell commented Jun 28, 2019

shilman commented Jun 28, 2019 •

edited

Loading

shilman commented Jun 29, 2019

rwieruch commented Jul 3, 2019 •

edited

Loading

shilman commented Jul 4, 2019

danielknell commented Jul 4, 2019 •

edited

Loading

shilman commented Jul 4, 2019 •

edited

Loading

danielknell commented Jul 4, 2019

shilman commented Jul 6, 2019 •

edited

Loading

danielknell commented Jul 6, 2019

aendra-rininsland commented Sep 18, 2019 •

edited

Loading

shilman commented Oct 24, 2019

shilman commented Oct 24, 2019

hisapy commented Mar 2, 2020 •

edited by shilman

Loading

Yama-Tomo commented Mar 10, 2020

CjChoiNZ commented Mar 19, 2020

Yama-Tomo commented Mar 20, 2020

lauthieb commented Mar 20, 2020

CjChoiNZ commented Mar 21, 2020

Yama-Tomo commented Mar 22, 2020

CjChoiNZ commented Mar 22, 2020

jorisw commented Apr 8, 2020 •

edited

Loading

ajkl2533 commented Jul 11, 2020

sashapawcloud commented Jul 17, 2020

jorgegir commented Nov 24, 2020

latviancoder commented Dec 7, 2020

MR-Neto commented Jan 18, 2021

bhoomij commented Mar 4, 2021

AlexandraNicolau10x commented Mar 23, 2021 •

edited

Loading

Storyshots fails with MDX stories via docs addon #7223

Storyshots fails with MDX stories via docs addon #7223

Comments

danielknell commented Jun 28, 2019

shilman commented Jun 28, 2019 • edited Loading

shilman commented Jun 29, 2019

rwieruch commented Jul 3, 2019 • edited Loading

shilman commented Jul 4, 2019

danielknell commented Jul 4, 2019 • edited Loading

shilman commented Jul 4, 2019 • edited Loading

danielknell commented Jul 4, 2019

shilman commented Jul 6, 2019 • edited Loading

danielknell commented Jul 6, 2019

aendra-rininsland commented Sep 18, 2019 • edited Loading

shilman commented Oct 24, 2019

shilman commented Oct 24, 2019

hisapy commented Mar 2, 2020 • edited by shilman Loading

Yama-Tomo commented Mar 10, 2020

CjChoiNZ commented Mar 19, 2020

Yama-Tomo commented Mar 20, 2020

lauthieb commented Mar 20, 2020

CjChoiNZ commented Mar 21, 2020

Yama-Tomo commented Mar 22, 2020

CjChoiNZ commented Mar 22, 2020

jorisw commented Apr 8, 2020 • edited Loading

ajkl2533 commented Jul 11, 2020

sashapawcloud commented Jul 17, 2020

jorgegir commented Nov 24, 2020

latviancoder commented Dec 7, 2020

MR-Neto commented Jan 18, 2021

bhoomij commented Mar 4, 2021

AlexandraNicolau10x commented Mar 23, 2021 • edited Loading

shilman commented Jun 28, 2019 •

edited

Loading

rwieruch commented Jul 3, 2019 •

edited

Loading

danielknell commented Jul 4, 2019 •

edited

Loading

shilman commented Jul 4, 2019 •

edited

Loading

shilman commented Jul 6, 2019 •

edited

Loading

aendra-rininsland commented Sep 18, 2019 •

edited

Loading

hisapy commented Mar 2, 2020 •

edited by shilman

Loading

jorisw commented Apr 8, 2020 •

edited

Loading

AlexandraNicolau10x commented Mar 23, 2021 •

edited

Loading