[Testing] a11y Testing in CLI with v8.5

[stevegreco]

Summary

I am looking for guidance on running the integrated a11y tests in the CLI. I have followed the documentation and used the auto migrate functionality. The a11y tests are running perfectly in the UI/Browser and it is fantastic.

I am not seeing a way for these same tests to be included when running Vitest from the CLI, all of my standard Storybook tests are running, but I am not getting the same a11y failures that I get in the browser. I am not even sure that they are running at all from the CLI.

I understand this is a relatively new feature and docs might not be updated yet, but I was hoping someone else has this working and could point me in the right direction.

Additional information

// vitest.setup.ts

import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import { beforeAll } from "vitest";
import { setProjectAnnotations } from "@storybook/react";
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);

// vitest.workspace.ts

import { defineWorkspace } from "vitest/config";
import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";

// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
export default defineWorkspace([
  "vite.config.ts",
  {
    extends: "vite.config.ts",
    plugins: [
      // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
      storybookTest({ configDir: ".storybook" }),
    ],
    test: {
      name: "storybook",
      browser: {
        enabled: true,
        headless: true,
        name: "chromium",
        provider: "playwright",
      },
      setupFiles: [".storybook/vitest.setup.ts"],
    },
  },
]);

Create a reproduction

No response

[shilman]

We had some last minute hesitation on the API and pulled this feature just before the 8.5 release. We'll be releasing a configuration API for this in 8.6.

In the meantime, to get unblocked you can enable it by adding the a11y-test tag in your .storybook/preview.js config. But be warned that this will almost certainly change completely in 8.6!

[stevegreco]

Thank you so much for the response!