Does this work with stories defined in MDX?

[diondiondion]

trafficstars

Hi,

I hope it's ok for me to open an issue for this even though it's just a question, but I couldn't find any information about whether or not this library works with stories that are defined inside of MDX using the Meta and Story components. Might be worth adding a note and/or example about this use case to the readme.

Thanks! Dion

[yannbf]

Hey @diondiondion it's totally fine! Thanks for asking this question.

Short answer: it's a great feature request, but it's currently unsupported.

I gave an explanation here with a possible workaround, I hope it suits you: https://github.com/storybookjs/testing-vue/issues/1

[sambunting]

Even with using both MDX and CSF I've ran into quite a few issues. On this page - it describes two ways you can get it to work, and while it does work in the Storybook UI - it wouldn't work with @storybook/testing-react unfortunately.

I've tried both approaches, and found two different issues with each:

CSF Stories with MDX Docs

This wouldn't work due to an error Jest throws:

SyntaxError: Cannot use import statement outside a module

I think this is because Jest is attempting to parse the .mdx file as a Javascript file at the import

CSF Stories with arbitrary MDX

This also doesn't work, because @storybook/testing-react throws an error:

TypeError: Cannot read property 'parameters' of undefined

I think this is because we're no-longer exporting a default object which is the metadata.

For this issue though, could the addon maybe allow another way of setting the metadata?

[sambunting]

Wanted to update this issue with a potential solution I've found here:

https://github.com/storybookjs/testing-react/issues/77#issuecomment-1026973896

[yannbf]

Hey there! I wanted to thank you for using @storybook/testing-react!

@storybook/testing-react has been promoted to a first-class Storybook functionality in Storybook 7. This means that you no longer need this package, and this package will not be worked on anymore (especially regarding Storybook 6, unless there are security issues). Instead, you can import the same utilities, but from the @storybook/react package. Additionally, the internals of composeStories and composeStory have been revamped, so the way a story is composed is way more accurate, and it's possible this issue doesn't happen there anymore.

Please do the following:

1. Upgrade to Storybook 7 if you haven't already
2. Uninstall @storybook/testing-react
3. Update your imports from @storybook/testing-react to @storybook/react

// Component.test.jsx
- import { composeStories } from '@storybook/testing-react';
+ import { composeStories } from '@storybook/react';

// setup-files.js
- import { setProjectAnnotations } from '@storybook/testing-react';
+ import { setProjectAnnotations } from '@storybook/react';

For now, I'll be closing this issue. Please, if even after migrating, you are still experiencing issues, report them in the Storybook monorepo.

Thank you so much for this journey!