diff --git a/.storybook/wcag/test-runner.ts b/.storybook/wcag/test-runner.ts index c8183794f..161d244e2 100644 --- a/.storybook/wcag/test-runner.ts +++ b/.storybook/wcag/test-runner.ts @@ -7,33 +7,40 @@ import { TestContext, TestRunnerConfig } from '@storybook/test-runner'; * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental * to learn more about the test-runner hooks API. */ +// Mutex to serialize axe checks and avoid concurrency issues +let axeLock: Promise = Promise.resolve(); + const renderFunctions: TestRunnerConfig = { async preVisit(page: Page) { await injectAxe(page); }, async postVisit(page: Page, context: TestContext) { - await checkA11y( - page, - { - exclude: [ - '#root .mapboxgl-canvas-container', - '.mapboxgl-marker', - '.mapboxgl-popup-close-button' - ], - }, - { - axeOptions: { - runOnly, - rules: { - 'color-contrast': { enabled: context.name !== 'Loading' }, - }, - }, - detailedReport: true, - detailedReportOptions: { - html: true, + // Serialize axe checks to avoid "Axe is already running" error + axeLock = axeLock.then(async () => { + await checkA11y( + page, + { + exclude: [ + '#root .mapboxgl-canvas-container', + '.mapboxgl-marker', + '.mapboxgl-popup-close-button' + ], }, - } - ); + { + axeOptions: { + runOnly, + rules: { + 'color-contrast': { enabled: context.name !== 'Loading' }, + }, + }, + detailedReport: true, + detailedReportOptions: { + html: true, + }, + } + ); + }); + await axeLock; }, };