Unexpected Token ">" failure with new experimental-addon-test

[cgatian]

Summary

I'm trying to get the new accessibility tests working with vitest and the @storybook/experimental-addon-test/vitest-plugin but receive the following error:

 FAIL   chromium  ../certainty/src/Box/Box.stories.tsx [ ../certainty/src/Box/Box.stories.tsx ]
SyntaxError: Unexpected token '>'

storybook: 8.5.0
vitest: 3.0.3

I don't have any specific tests defined in my project (no files are defined with Box.test.tsx or Box.playwrite.tsx), could this be the issue? I was assuming with the new plugin, Storybook would automatically create tests for each Story found in the project, and run those through an accessibility test?

I followed along in the documentation and opted to use the automatic migration. I also referenced portable-stories-kitchen-sink, and seem to be doing what's outlined there.

Additional information

vitest.config.ts

import { defineConfig } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import react from '@vitejs/plugin-react';

const dirname =
  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  plugins: [
    react(),
    storybookTest({
      // The location of your Storybook config, main.js|ts
      configDir: path.join(dirname, '.storybook'),
      storybookScript: 'pnpm run dev -- --ci',
    }),
  ],
  test: {
    browser: {
      enabled: true,
      headless: true,
      name: 'chromium',
      provider: 'playwright',
    },
    setupFiles: ['./.storybook/vitest.setup.ts'],
  },
});

vitest.setup.ts

import { beforeAll } from 'vitest';
import { setProjectAnnotations } from '@storybook/react';
import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
import * as projectAnnotations from './preview';

// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

beforeAll(project.beforeAll);

test-runner.ts

import type { TestRunnerConfig } from '@storybook/test-runner';
import { injectAxe, checkA11y } from 'axe-playwright';

/*
 * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
 * to learn more about the test-runner hooks API.
 */
const config: TestRunnerConfig = {
  async preVisit(page) {
    await injectAxe(page);
  },
  async postVisit(page) {
    await checkA11y(page, 'body', {
      detailedReport: true,
      detailedReportOptions: {
        html: true,
      },
    });
  },
};

export default config;

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

Create a reproduction

No response

[shilman]

Do you have a reproduction you can share? I think the problem is that you're following the portable stories examples but users shouldn't need to do anything with portable stories in Storybook Test. That all happens automatically behind the scenes.

[cgatian]

Thanks for at least making a reply, I'm sure you're super busy so thank you!!!

Determined the issue was due to a custom component that uses mdx into the MDXProvider components.
The issue is the import of the DesignWarning.mdx file.

const preview: Preview = {
  tags: ['autodocs'],
  parameters: {
    docs: {
      container: DocsContainer
    }
}

DocsContainer.tsx

import { MDXProvider } from '@mdx-js/react';
import { DocsContainer as StorybookDocsContainer } from '@storybook/blocks';
import DesignWarning from './DesignWarning.mdx';

/**
 * Custom DocsContainer that provides custom MDX components as "shortCodes"
 * Storybook considered including their doc blocks as shortCodes
 * https://github.com/storybookjs/storybook/issues/7458
 */
export const DocsContainer = (props) => {
  return (
    <MDXProvider
      components={{
        // Add additional global components here
        DesignWarning,
      }}
    >
      <StorybookDocsContainer {...props} />
    </MDXProvider>
  );
};

[shilman]

Interesting. I think we actually encountered this before but I don't know what we concluded, if anything. @yannbf didn't you run into this?

[cgatian]

I think I saw an issue floating around where the vitest pipeline needed an mdx provider added. Might be this issue?
storybookjs/vite-plugin-storybook-nextjs#29