storybook: [addon-a11y] Error: Expect axe._selectorData to be set up
Bug summary
After having installed a11y-addon, when running yarn storybook I get the following console error:
Error: Expect axe._selectorData to be set up
at generateSelector (axe.js:2810)
at Object.createUniqueSelector [as getSelector] (axe.js:2866)
at DqElement.get selector [as selector] (axe.js:2265)
at axe.js:1262
at Array.map (<anonymous>)
at axe.js:1255
at Array.map (<anonymous>)
at axe.js:1252
at Array.forEach (<anonymous>)
at Object.../../node_modules/axe-core/axe.js.helpers.processAggregate (axe.js:1244)
Everything looks normal on the front end and works as expected, even though the console error is there.
Steps to reproduce
- Install a11y addon
- Add
import '@storybook/addon-a11y/register'toaddons.js - Add
addDecorator(checkA11y)toconfig.js - Run
yarn storybook
I use Typescript, React and Styled components.
My config.js looks like this:
import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import generic from '../src/generic'
import elements from '../src/elements'
import styled from 'styled-components'
import { styles, globalStorybookStyles } from '../src/stories/styles'
import { checkA11y } from '@storybook/addon-a11y'
addDecorator(
withInfo({
inline: true,
})
)
addDecorator(checkA11y)
addDecorator(story => {
return <StyledDiv role="main">{story()}</StyledDiv>
})
const StyledDiv = styled.div`
// Globals
${generic} ${elements}
// Storybook globals
${globalStorybookStyles}
// Container styles
${styles}
`
// Import all files ending in *.stories.tsx from src
function loadStories() {
const req = require.context('../src', true, /^.*\.stories\.tsx$/)
// Show these above the other sections
require('../src/stories/introduction/gettingStarted.stories')
require('../src/stories/behavior.stories')
req.keys().forEach(filename => {
req(filename)
})
}
configure(loadStories, module)
Versions of Storybook and other stuff
"dependencies": {
"@material-ui/core": "^1.3.1",
"@storybook/addon-a11y": "4.0.0-alpha.14",
"@storybook/addon-actions": "4.0.0-alpha.14",
"@storybook/addon-info": "4.0.0-alpha.14",
"@storybook/addon-links": "4.0.0-alpha.14",
"@storybook/addon-notes": "4.0.0-alpha.14",
"@storybook/addon-viewport": "4.0.0-alpha.14",
"@storybook/addons": "4.0.0-alpha.14",
"@storybook/react": "4.0.0-alpha.14",
"@types/webpack-env": "^1.13.6",
"cpx": "^1.5.0",
"deepmerge": "^2.1.1",
"enzyme-to-json": "^3.3.4",
"gh-pages": "^1.2.0",
"is-buffer": "^2.0.2",
"jest-styled-components": "^5.0.1",
"json-ts": "^1.6.4",
"polished": "^1.9.2",
"react": "^16.2.0",
"react-docgen-typescript-loader": "^2.1.1",
"react-dom": "^16.2.0",
"react-remarkable": "^1.1.3",
"require-context": "^1.1.0",
"styled-components": "^3.3.0",
"ts-loader": "^4.3.1",
"tslint": "^5.9.1",
"typescript": "^2.9.1",
"webpack": "^4.11.1",
"webpack-cli": "^2.1.3"
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 11
- Comments: 17 (6 by maintainers)
I have the same issues.
Still occurring in 4.0.0-alpha.20. The console warning triggers on mount of any Story page.
Turns out I needed to fix 2 issues to solve this:
When editing stories, HMR kicks in and loads addons twice. Some addons have side-effects which could then be executed twice.
When running axe and navigating very fast, it could happen that storybook would run axe on 2 elements at the same time.
I fixed both issues. Will be part of
5.0.0I can also confirm this didn’t fix it for me either.