Make chromatic snapshot docs tab in storybook

Question

What i'm looking to achieve

I am looking at options for reducing the number of stories we snapshot and test in Chromatic (currently nearing 400). We use storybook for our design system and also for visual testing with Chromatic.

Currently our stories are roughly structured as a story for each set of states / major variation of a component. For example our button has:

• Sizes - sm, m, l, responsive
• Colours - primary, secondary, danger, etc
• Layouts - left-icon, right-icon
• Playground - a story containing single button where you can interact with all the various inputs. Playground stories are already excluded from Chromatic.

I was thinking of adding a "visual test" story to each component which would have every variation of the button on a single canvas and then only include the "visual test" stories in the chromatic tests. In the button example this would reduce button snapshots from 3 to 1, and we have other components with way more variations than this.

The best solution I found for this is to create a doc page, i really liked the option of using MDX to compose a page that includes multiple stories

<Story id="some-component--some-name" />
<Story id="some-component--some-other-name" />

MDX Docs

The Problem

So far I cannot find anyway to make chromatic take a snapshot of a doc or pure doc page. I have tried making docs the default view in my storybook, and even hiding the canvas tab in my storybook altogether, but it seems Chromatic must parse and render the stories with their own config.

The Question

Is there a way to force chromatic to take snapshots of doc pages, or even better of "pure documentation" MDX pages (as described in the MDX docs)

Alternatively if anyone has any other suggestions about creating a story composed of other stories, that could also be a solution to my problem.

Currently the only alternative I see is to duplicate stories, which isn't ideal.

Answer 1

In the end the solution to this was an add-on called Variants. You can ignore all stories from Chromatic by default and only take snapshots of stories that use the Varitants add-on to display every variant on a single page.

storybook-addon-variants

Answer 2

You can disable all snapshots at ./storybook/preview.js then you enable it for single stories. I just don't know how to achieve that using MDX (which is my case as well)

Update: I guess the following does the trick for MDX (if you're disabling all from preview.js then pass { disableSnapshot: false })

<Story name="StoryName" args={{
  chromatic: { disableSnapshot: true }
}}>...</Story>
``

Ref: https://www.chromatic.com/docs/ignoring-elements#ignore-stories