Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-docs: Jest MDX transform for storyshots #8189

Merged
merged 16 commits into from
Oct 24, 2019
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions addons/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,20 @@ configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);

For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation.

If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to
configure Jest to transform MDX stories into something Storyshots can understand:

Add the following to your Jest configuration:

```json
{
"transform": {
"^.+\\.[tj]sx?$": "babel-jest",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't there a pipe symbol missing: [t|j] ? As here: https://github.com/facebook/jest/tree/master/packages/babel-jest#setup

"^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
Copy link
Member

@Hypnosphi Hypnosphi Oct 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also matches .md extension. I think it's not needed

}
}
```

## Preset options

The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
Expand Down
19 changes: 19 additions & 0 deletions addons/docs/jest-transform-mdx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const mdx = require('@mdx-js/mdx');
const babel = require('babel-jest');
const createCompiler = require('./mdx-compiler-plugin');

const compilers = [createCompiler({})];

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

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

return babel.process(result, filename, config, options);
},
};
3 changes: 2 additions & 1 deletion addons/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
},
"peerDependencies": {
"babel-loader": "^8.0.0",
"react": "^16.8.0"
"react": "^16.8.0",
"babel-jest": "*"
},
"publishConfig": {
"access": "public"
Expand Down
17 changes: 17 additions & 0 deletions addons/storyshots/storyshots-core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,23 @@ StoryShots addon for Preact is dependent on [preact-render-to-json](https://gith
yarn add preact-render-to-json --dev
```

### Configure Jest for MDX Docs Add-On Stories

If using the [Docs add-on](../../docs/README.md) with
[MDX stories](../../docs/docs/mdx.md) you will need
to configure Jest to transform MDX stories into something Storyshots can understand:

Add the following to your Jest configuration:

```json
{
"transform": {
"^.+\\.[tj]sx?$": "babel-jest",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't the pipe symbol necessary? [t|j]

"^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
}
}
```

### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.

Expand Down