The add-on does not work when importing mdx documentation into stories

[dogWuki]

Describe the bug The add-on does not work when importing mdx documentation into stories

Example

// index.stories.jsx

import React from 'react';

import { Text } from '../index';

import Doc from './docs.mdx';

export default {
  title: 'General/Text',
  component: Text,
  parameters: {
    docs: {
      page: Doc,
    },
  },
};

export const Tag = () => (
      <Text tag="h1">Heading 1</Text>
);

When I run my tests without parameters.docs everything is fine and works as it should. But it's not great.

The same situation was described here.

[yannbf]

Hey @dogWookie thanks for using the library! Could you describe what error is shown? It might be that you need to add a mdx transformer in your jest configuration, or mock mdx files. I don't have a lot of knowledge in the MDX part, but can you try this in your jest config file?

module.exports = {
  transform: {
    // your other transformers here..
    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
  },
};

[yannbf]

Hey @dogWookie , did the solution above work for you?

[sambunting]

Unfortunately - the transform doesn't seem to work for me. Instead I get another error of Cannot use import statement outside a module.

The file throwing the error is the jest.setup.js file.

It might just have something to do with how my project is setup - I'm going to spend a bit of time to have a play around with it - and I'll see how I get on :)

[sambunting]

I think I've done it!!!

I needed to do a few other things in order for it to get it to work:

• I needed to change my .babelrc file to a babel.config.js file.
• I needed to add '^.+\\.jsx?$': 'babel-jest', as an additional transform to jest.config.js
• I needed to _downgrade Jest to Jest 26. 27 seems to have several issues with the transformer. https://github.com/storybookjs/storybook/issues/15916