MDX files are not being snapped

MartinKristof commented 23 hours ago

The problem

I tried to add mdx stories to the config to be snapped. They are ignored and not visible even in verbose mode. Only CSF stories are being snapped. We created the All section to decrease the number of snapshots. But all of the stories in the All section are CSF in React (no MDX) and for them, it works.

Environment

Node version: 20.12.2
@percy/cli version: 1.29.3
Version of Percy SDK you’re using: @percy/storybook@6.0.2
If needed, a build or snapshot ID: localhost
OS version: Sonoma 14.6.1
Storybook version: 7.3.2
Type of shell command-line [interface]: PERCY_TOKEN=PERCY_TOKEN npx percy storybook http://localhost:4400 -c ./percy.yml -v -d

Details

Percy config:

[percy:config] Found config file: percy.yml (0ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      1920
    ],
    minHeight: 1024
  },
  storybook: {
    waitForTimeout: 1000,
    waitForSelector: '',
    include: [
      'All/*',
      'Utilities/*'
    ]
  }
}

Debug logs

[percy:storybook] Requesting Storybook: http://localhost:4400 (23ms) [percy:core] Notice: Percy collects CI logs to improve service and enhance your experience. These logs help us debug issues and provide insights on your dashboards, making it easier to optimize the product experience. Logs are stored securely for 30 days. You can opt out anytime with export PERCY_CLIENT_ERROR_LOGS=false, but keeping this enabled helps us offer the best support and features. (15ms) [percy:core] Percy has started! (1ms) [percy:core:browser] Launching browser (1ms)

[percy:core:page] Page created (49ms) [percy:core:page] Page created (2ms) [percy:core:page] Navigate to: http://localhost:4400/?path=/settings/about (139ms) [percy:core:page] Navigate to: http://localhost:4400/iframe.html (0ms) [percy:core:page] Page navigated (278ms) [percy:core:page] Page navigated (414ms) [percy:core:page] Page closed (57ms) [percy:core:page] Page closed (308ms) [percy:storybook:config] Skipping story: Objects/Grid: Default (1ms) [percy:storybook:config] Skipping story: Objects/Grid: Continuous (0ms) [percy:storybook:config] Skipping story: Objects/Layout: Default (0ms) [percy:storybook:config] Skipping story: Objects/Layout: Equal (0ms) [percy:storybook:config] Skipping story: Objects/Layout: Inverse (0ms) [percy:storybook:config] Skipping story: Objects/Layout: Vertical Tight (0ms) [percy:storybook:config] Skipping story: Objects/Layout: Vertical Snug (0ms) [percy:storybook:config] Skipping story: Objects/LineWrap: Default (0ms) [percy:storybook:config] Skipping story: Objects/Table: Default (0ms) [percy:storybook:config] Skipping story: Objects/Table: Scrollable (0ms) [percy:storybook:config] Skipping story: Objects/Table: First Column Sticky (0ms) [percy:storybook:config] Skipping story: Objects/Table: Scrollable And First Column Sticky (0ms) [percy:storybook:config] Skipping story: Objects/Wrapper: Default (0ms) [percy:storybook:config] Skipping story: Objects/Wrapper: Line (0ms) [percy:storybook:config] Skipping story: Objects/Wrapper: Fill (0ms) [percy:storybook:config] Skipping story: Objects/Wrapper: Fill Medium Margin (0ms) [percy:storybook:config] Skipping story: Objects/Wrapper: Fill Large Margin (0ms) [percy:storybook:config] Skipping story: Elements/Button: Default (0ms) [percy:storybook:config] Skipping story: Elements/Button: No Button Like (0ms) [percy:storybook:config] Skipping story: Elements/Button: Add To Cart (0ms) [percy:storybook:config] Skipping story: Elements/Button: Secondary (0ms) [percy:storybook:config] Skipping story: Elements/Button: Red (0ms) [percy:storybook:config] Skipping story: Elements/Button: Outline (0ms) [percy:storybook:config] Skipping story: Elements/Button: Text Brand (0ms) [percy:storybook:config] Skipping story: Elements/Button: Text Success (0ms) [percy:storybook:config] Skipping story: Elements/Button: Text Error (0ms) [percy:storybook:config] Skipping story: Elements/Button: Text Warning (0ms) [percy:storybook:config] Skipping story: Elements/Button: Text Neutral (0ms) [percy:storybook:config] Skipping story: Elements/Button: Squared (0ms) [percy:storybook:config] Skipping story: Elements/Button: Circled (0ms) [percy:storybook:config] Skipping story: Elements/Heading: Default (1ms) [percy:storybook:config] Skipping story: Elements/Action: Default (0ms) [percy:storybook:config] Skipping story: Elements/Action: Subtle (0ms) [percy:storybook:config] Skipping story: Elements/Anchor: Default (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Default (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Top (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Ad (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Sale (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Info (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Advice (0ms) [percy:storybook:config] Skipping story: Elements/Badge: Sponsored (0ms) [percy:storybook:config] Skipping story: Elements/CheckBox: Default (0ms) [percy:storybook:config] Skipping story: Elements/Counter: Default (0ms) [percy:storybook:config] Skipping story: Elements/EnergyLabel: Default (0ms) [percy:storybook:config] Skipping story: Elements/Icon: Default (0ms) [percy:storybook:config] Skipping story: Elements/Icon: Circle (0ms) [percy:storybook:config] Skipping story: Elements/Icon: Orb (0ms) [percy:storybook:config] Skipping story: Elements/Icon: With Label (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Green (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Red (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Blue (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Yellow (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Orange (0ms) [percy:storybook:config] Skipping story: Elements/IconBadge: Grey (0ms) [percy:storybook:config] Skipping story: Elements/Input: Primary (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Prefix (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Prefix And Suffix Icon (0ms) [percy:storybook:config] Skipping story: Elements/Input: Error (0ms) [percy:storybook:config] Skipping story: Elements/Input: Disabled (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Suffix (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Suffix Icon (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Clearable Icon (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Suffix And Clearable Icon (0ms) [percy:storybook:config] Skipping story: Elements/Input: With Prefix And Clearable Icon (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Default (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Simple (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Error (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Warning (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Success (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Info Blue (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Info (0ms) [percy:storybook:config] Skipping story: Elements/Notice: Without Icon (0ms) [percy:storybook:config] Skipping story: Elements/RadioGroup: Large (0ms) [percy:storybook:config] Skipping story: Elements/RadioGroup: Medium (0ms) [percy:storybook:config] Skipping story: Elements/RadioGroup: Disabled (0ms) [percy:storybook:config] Skipping story: Elements/Select: Default (0ms) [percy:storybook:config] Skipping story: Components/Accordion: Single (0ms) [percy:storybook:config] Skipping story: Components/Accordion: Multiple Opened Items (0ms) [percy:storybook:config] Skipping story: Components/Accordion: Filled Variant (0ms) [percy:storybook:config] Skipping story: Components/Accordion: Outlined Variant (0ms) [percy:storybook:config] Skipping story: Components/Accordion: Plus Minus Icon (0ms) [percy:storybook:config] Skipping story: Components/ActionList: Default (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Pros (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Cons (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Pros Circle (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Cons Circle (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Pros Counter (0ms) [percy:storybook:config] Skipping story: Components/AttributeList: Cons Counter (0ms) [percy:storybook:config] Skipping story: Components/BlockList: Default (0ms) [percy:storybook:config] Skipping story: Components/BlockList: Snug (0ms) [percy:storybook:config] Skipping story: Components/BlockList: Tight (0ms) [percy:storybook:config] Skipping story: Components/BlockList: Loose (0ms) [percy:storybook:config] Skipping story: Components/Breadcrumbs: Default (0ms) [percy:storybook:config] Skipping story: Components/BulletList: Default (0ms) [percy:storybook:config] Skipping story: Components/ButtonGroup: Default (0ms) [percy:storybook:config] Skipping story: Components/ButtonGroup: Extra Large (0ms) [percy:storybook:config] Skipping story: Components/ButtonGroup: Large (0ms) [percy:storybook:config] Skipping story: Components/ButtonGroup: Small (0ms) [percy:storybook:config] Skipping story: Components/ButtonGroup: Extra Small (0ms) [percy:storybook:config] Skipping story: Components/CategoryLevels: Default (0ms) [percy:storybook:config] Skipping story: Components/CategoryLevels: Blurred (0ms) [percy:storybook:config] Skipping story: Components/CategoryList: Default (0ms) [percy:storybook:config] Skipping story: Components/CategoryList: Horizontal (0ms) [percy:storybook:config] Skipping story: Components/CategoryList: Vertical (0ms) [percy:storybook:config] Skipping story: Components/Chip: Default (0ms) [percy:storybook:config] Skipping story: Components/EditableContent: Default (0ms) [percy:storybook:config] Skipping story: Components/FormField: Default (0ms) [percy:storybook:config] Skipping story: Components/FormField: Info (0ms) [percy:storybook:config] Skipping story: Components/FormField: Error (0ms) [percy:storybook:config] Skipping story: Components/FormField: With Label (0ms) [percy:storybook:config] Skipping story: Components/FormField: Disabled (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Default (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Snug (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Tight (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Loose (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Spread (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Fill (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Align Top (0ms) [percy:storybook:config] Skipping story: Components/InlineList: Align Bottom (0ms) [percy:storybook:config] Skipping story: Components/Modal: Default (0ms) [percy:storybook:config] Skipping story: Components/Modal: Container (0ms) [percy:storybook:config] Skipping story: Components/ModalView: Default (0ms) [percy:storybook:config] Skipping story: Components/Offscreen: Default (0ms) [percy:storybook:config] Skipping story: Components/Offscreen: With Footer (0ms) [percy:storybook:config] Skipping story: Components/Offscreen: With Body And Footer (0ms) [percy:storybook:config] Skipping story: Components/Pagination: Default (0ms) [percy:storybook:config] Skipping story: Components/PipeList: Default (0ms) [percy:storybook:config] Skipping story: Components/Popover: Default (0ms) [percy:storybook:config] Skipping story: Components/PromoArea: Default (0ms) [percy:storybook:config] Skipping story: Components/PromoArea: Only 2 (0ms) [percy:storybook:config] Skipping story: Components/PromoArea: More (0ms) [percy:storybook:config] Skipping story: Components/Rating: Default (0ms) [percy:storybook:config] Skipping story: Components/Rating: Single Star (0ms) [percy:storybook:config] Skipping story: Components/SectionList: Default (0ms) [percy:storybook:config] Skipping story: Components/SimpleList: Default (0ms) [percy:storybook:config] Skipping story: Components/Skeleton: Default (0ms) [percy:storybook:config] Skipping story: Components/Skeleton: Grid Story (0ms) [percy:storybook:config] Skipping story: Components/StickyNavigation: Default (0ms) [percy:storybook:config] Skipping story: Components/StickyNavigation: Orders (0ms) [percy:storybook:config] Skipping story: Components/Subtabs: Default (0ms) [percy:storybook:config] Skipping story: Components/Tabs: Default (0ms) [percy:storybook:config] Skipping story: Components/Toast: Default (0ms) [percy:storybook:config] Skipping story: Components/ToggleList: Default (0ms) [percy:storybook:config] Skipping story: Components/Banner: Default (0ms) [percy:storybook:config] Skipping story: Components/Banner: Sticky (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: Default (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: With Title (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: With Button (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: With Expanded Text (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: Without Button (0ms) [percy:storybook:config] Skipping story: Compositions/Branding: Without Hero (0ms) [percy:storybook:config] Skipping story: Compositions/Post: Default (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Default (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Serp (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Serp Offer (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Single Shop (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Single Shop With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Single Shop With Variants (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Single Shop With Variants With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Product Ad (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Product Ad With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/Product: Product With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Default (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Serp (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Serp Offer (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Single Shop (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Single Shop With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Single Shop With Variants (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Single Shop With Variants With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Product Ad (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Product Ad With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Product With Discount (0ms) [percy:storybook:config] Skipping story: Compositions/ProductCompact: Product Compare (0ms) [percy:storybook:config] Skipping story: Compositions/Review: Default (0ms) [percy:core:page] Page created (7ms) [percy:core:page] Navigate to: http://localhost:4400/iframe.html?id=all--components&viewMode=story (33ms) [percy:core:page] Page navigated (150ms) [percy:storybook] Loading story via previewResource: All: Components (0ms) [percy:storybook] Loading story via previewResource: All: Compositions (7ms) [percy:storybook] Loading story via previewResource: All: Elements (2ms) [percy:storybook] Loading story via previewResource: All: Objects (1ms) [percy:storybook] Loading story via previewResource: All: Icons (0ms) [percy:core:snapshot] --------- (0ms) [percy:core:snapshot] Received snapshot: All: Components (1ms) [percy:core:snapshot] - url: http://localhost:4400/iframe.html?id=all--components (0ms) [percy:core:snapshot] - widths: 1920px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - enableJavaScript: false (0ms) [percy:core:snapshot] - cliEnableJavaScript: true (0ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core:snapshot] - discovery.captureMockedServiceWorker: false (0ms) [percy:core:snapshot] - domSnapshot: true (0ms) [percy:core] Snapshot found: All: Components (0ms) [percy:core:snapshot] --------- (0ms) [percy:core:snapshot] Received snapshot: All: Compositions (0ms) [percy:core:snapshot] - url: http://localhost:4400/iframe.html?id=all--compositions (0ms) [percy:core:snapshot] - widths: 1920px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - enableJavaScript: false (0ms) [percy:core:snapshot] - cliEnableJavaScript: true (0ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core:snapshot] - discovery.captureMockedServiceWorker: false (0ms) [percy:core:snapshot] - domSnapshot: true (0ms) [percy:core] Snapshot found: All: Compositions (0ms) [percy:core:snapshot] --------- (0ms) [percy:core:snapshot] Received snapshot: All: Elements (0ms) [percy:core:snapshot] - url: http://localhost:4400/iframe.html?id=all--elements (0ms) [percy:core:snapshot] - widths: 1920px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - enableJavaScript: false (0ms) [percy:core:snapshot] - cliEnableJavaScript: true (0ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core:snapshot] - discovery.captureMockedServiceWorker: false (0ms) [percy:core:snapshot] - domSnapshot: true (0ms) [percy:core] Snapshot found: All: Elements (0ms) [percy:core:snapshot] --------- (0ms) [percy:core:snapshot] Received snapshot: All: Objects (0ms) [percy:core:snapshot] - url: http://localhost:4400/iframe.html?id=all--objects (0ms) [percy:core:snapshot] - widths: 1920px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - enableJavaScript: false (0ms) [percy:core:snapshot] - cliEnableJavaScript: true (0ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core:snapshot] - discovery.captureMockedServiceWorker: false (0ms) [percy:core:snapshot] - domSnapshot: true (0ms) [percy:core] Snapshot found: All: Objects (0ms) [percy:core:snapshot] --------- (0ms) [percy:core:snapshot] Received snapshot: All: Icons (0ms) [percy:core:snapshot] - url: http://localhost:4400/iframe.html?id=all--icons (0ms) [percy:core:snapshot] - widths: 1920px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - enableJavaScript: false (0ms) [percy:core:snapshot] - cliEnableJavaScript: true (1ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core:snapshot] - discovery.captureMockedServiceWorker: false (0ms) [percy:core:snapshot] - domSnapshot: true (0ms) [percy:core] Snapshot found: All: Icons (0ms) [percy:core:page] Page closed (3ms) [percy:core] Found 5 snapshots (0ms) [percy:core:queue] Clearing discovery queue, queued state: 0, pending state: 0 (0ms) [percy:core:browser] Closing browser (0ms) [percy:core:browser] Browser closed (22ms) [percy:core:queue] Clearing snapshot queue, queued state: 5, pending state: 0 (0ms) [percy:core] Build not created (0ms)

prklm10 commented 22 hours ago

@MartinKristof Can you provide us with minimal reproducible example.

MartinKristof commented 20 hours ago

For example I have this mdx story in folder src/utlities/Display.stories.mdx:

{/* Display.stories.mdx */}

import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
import { HastyProvider, ScopeWrapper } from '@heureka-group/hasty-components';
import '@heureka-group/hasty-styles';
import '../../.storybook/styleguide.css';
import packageJSON from '@heureka-group/hasty-styles-src/package.json';

export const stylesVersion = packageJSON.version;

<Meta title="Utilities/Display" />

# Display

Display utility classes serve the purpose of hiding content in two different ways. The first one, using the class .u-visually-hide, hides an element visually, maintaining its accessibility to assistive technologies like screen readers.
The other makes an element disappear completely — at a given breakpoint (e.g. .u-hide@lteLine) or on a given condition (e.g. .u-hide-if-js).

## Visually Hide

### `.u-visually-hide`

<Unstyled>
    <HastyProvider stylesVersion={stylesVersion} imagesCdnUrl="">
        <ScopeWrapper scope="storybook scope-styleguide">
            <div class="sg-element__live">
                <p class="u-visually-hide">I'm invisible, yet accessible!</p>
            </div>
        </ScopeWrapper>
    </HastyProvider>
</Unstyled>

## Hide on Small Screens

### `.u-hide@lteLine`

<Unstyled>
    <HastyProvider stylesVersion={stylesVersion} imagesCdnUrl="">
        <ScopeWrapper scope="storybook scope-styleguide">
            <div class="sg-element__live">
                <p class="u-hide@lteLine">I don't exist at smaller screens!</p>
            </div>
        </ScopeWrapper>
    </HastyProvider>

</Unstyled>

## Hide if JavaScript is Enabled

### `.u-hide-if-js`

<div class="js">
    <Unstyled>
        <HastyProvider stylesVersion={stylesVersion} imagesCdnUrl="">
            <ScopeWrapper scope="storybook scope-styleguide">
                <div class="sg-element__live">
                    <p class="u-hide-if-js">I don't exist if JavaScript is available!</p>
                </div>
            </ScopeWrapper>
        </HastyProvider>
    </Unstyled>
</div>

## Hide on Large Screens

### `.u-hide@gtLine`

<Unstyled>
    <HastyProvider stylesVersion={stylesVersion} imagesCdnUrl="">
        <ScopeWrapper scope="storybook scope-styleguide">
            <div class="sg-element__live">
                <p class="u-hide@gtLine">I don't exist at larger screens!</p>
            </div>
        </ScopeWrapper>
    </HastyProvider>
</Unstyled>

The config:

{
  version: 2,
  snapshot: {
    widths: [
      1920
    ],
    minHeight: 1024
  },
  storybook: {
    waitForTimeout: 1000,
    waitForSelector: '',
    include: [
      'All/*',
      'Utilities/*'
    ]
  }
}

percy / percy-storybook