How to Automate Accessibility Testing in Vitest with Storybook

[eldursi]

Summary

Hello,
I'm trying to set up automated accessibility testing for my stories using Vitest and I want to know if it's possible.
I followed the Storybook Test Runner guide to set up automated accessibility testing for my stories.
It works well on its own as such:

test-runner.ts

import { type TestRunnerConfig, getStoryContext } from '@storybook/test-runner'
import { checkA11y, configureAxe, injectAxe } 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, context) {
    const storyContext = await getStoryContext(page, context)

    // Get the entire context of a story, including parameters, args, argTypes, etc.
    if (storyContext.parameters?.a11y?.disable) {
      return
    }

    // Apply story-level a11y rules
    await configureAxe(page, {
      rules: storyContext.parameters?.a11y?.config?.rules,
    })

    await checkA11y(page, '#storybook-root', {
      includedImpacts: ['critical', 'serious'],
      detailedReport: true,
      detailedReportOptions: {
        html: true,
      },
    })
  },
}

export default config

However, I want to run these accessibility tests as part of my Vitest test suite since that's where I run all my tests.

While the Storybook Test Runner works independently, I can’t get it to run inside Vitest. The test-runner.ts hooks (setup, preVisit, postVisit) don’t seem to be triggered in the Vitest test. I was wondering if there's a way to do this?

Any help or advice appreciated.

Additional information

Storybook version: 8.4.7

Create a reproduction

No response

[yannbf]

Hey there @eldursi!

If you're using Vitest, you should try out our new testing integration, which is powered by Vitest. It also has an out of the box integration with the @storybook/addon-a11y package, providing you with automated a11y tests, both in Storybook and in Vitest.

This is currently in Storybook 8.5, which is in beta and will be released to stable soon.

Please check this for more context:
https://storybook.js.org/docs/8.5/writing-tests/test-addon
https://storybook.js.org/docs/8.5/writing-tests/accessibility-testing#test-addon-integration