How to do visual testing of MDX inside Storybook ?

I’d like to visual validate that my theme is fine when I’m using MDX pages or MDX snippets.

What I do now is:

• generate a page
• copy / paste the page data that is generated inside the public folder into a storybook story.
• call MDXRenderer inside ThemeProvider to see that things are fine inside Storybook

Here is an example of the result

import React from "react"
import { storiesOf } from "@storybook/react"
import theme from "../theme"
import { ThemeProvider } from "theme-ui"
import { MDXRenderer } from "gatsby-plugin-mdx"

const testStory = {
  componentChunkName: "component---src-templates-blog-post-js",
  path: "/blog/hello/",
  webpackCompilationHash: "",
  result: {
    data: {
      mdx: {
        id: "1876f73b-b76d-5c39-859e-f02a81bdc898",
        body:
          'function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  "date": "2019-08-07T00:00:00.000Z",\n  "summary": "Some super awesome post",\n  "tags": ["intro", "super"],\n  "title": "Impressive writing"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope");\n    return mdx("div", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = "wrapper";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, ["components"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: "MDXLayout"\n  }), mdx("p", null, "I\'m writing this because I need to test that I can view a post."), mdx("h1", null, "Some header"), mdx("p", null, "Notice how it\'s formatted and find a way to improve this..."));\n}\n;\nMDXContent.isMDXComponent = true;',
        frontmatter: { title: "Impressive writing" },
      },
    },
    pageContext: {
      isCreatedByStatefulCreatePages: false,
      id: "1876f73b-b76d-5c39-859e-f02a81bdc898",
      next: {
        id: "64e4cbb6-b372-58a9-a1e7-648c3c869bc9",
        frontmatter: { title: "Creating a blog with Gatsby in 2019" },
        fields: { slug: "/blog/CreatingABlogWithGatsby/" },
      },
      previous: {
        id: "af4ba4c3-9c0a-514b-befb-018c68e65297",
        frontmatter: { title: "May the followup be with you" },
        fields: { slug: "/blog/bigHello/" },
      },
    },
  },
}

storiesOf("Mdx", module).add("default", () => {
  return (
    <ThemeProvider theme={theme}>
      <MDXRenderer>{testStory.result.data.mdx.body}</MDXRenderer>
    </ThemeProvider>
  )
})

Here is what I’d like to do

const testStory = `---
date: 2019-08-07T00:00:00.000Z
summary: Some super awesome post
tags:
  - intro
  - super
title: Impressive writing
---

I'm writing this because I need to test that I can view a post.

# Some header

Notice how it's formatted and find a way to improve this...`

storiesOf("Mdx", module).add("default", () => {
  return (
    <ThemeProvider theme={theme}>
      <MagicalMdxParserRenderer source={testStory} />
    </ThemeProvider>
  )
})

Am I asking for too much ? I try to decipher the gatsby-plugin-mdx code to create my own MagicalMdxParserRenderer but I didn’t have much luck.

Please help. Thanks.

[jxnblk]

I think you’ll need to customize the webpack config for Storybook. Sorry, I haven’t used Storybook in a while

[jxnblk]

You can use the MDX runtime for something like this, but it’ll likely increase the size of your bundle (which might matter less for something local like Storybook), but I think your best bet is to use the MDX webpack loader for something like this