Storypa11y
StoryShots adds automatic Jest Testing for Accessibility for Storybook. It uses pa11y in its testing suites.
To use Storypa11y, you must use your existing Storybook stories as the input for Jest Testing.
Getting Started
Add the following module into your app.
npm install --save-dev storybook-addon-storypa11y
Quickstart
Create a file matching your jests test regex and add the following code:
import { initStorypa11y } from 'storybook-addon-storypa11y';
initStorypa11y();
This will create a test suite which tests all of your stories for accessibility.
Options
You can pass an options object to the initStorypa11y
function which takes several keys:
suite: 'My suite'
storyKindRegex: /^((?!.*?Fail).)*$/,
storyNameRegex: /^((?!.*?SomeStory).)*$/,
out: 'storybook-static',
test: pa11y,
suite
The name of the test suite that will be generated.
storyKindRegex
You can pass a regex to only include matching story kinds in accessibility testing.
storyNameRegex
You can pass a regex to only include matching stories in accessibility testing.
out
Relative path from the project root to the folder you build your storybook in. Defaults to storybook-static
.
pa11yOptions
Options that will be passed directly to pa11y. See their documentation for what can be passed. Also check the default options set by Storypa11y.
test
It is also possible to pass your own test function. See stories/failing.test.js for an example.
Troubleshooting
ReferenceError: __requireContext is not defined
This may happen if you use webpacks require.context
functionality to gather all your storybooks stories. It's not available from a jest environment, which we can fix by adding a babel plugin to provide the same interface.
- Install the plugin with
npm install --save-dev babel-plugin-require-context-hook
- Add the plugin to your pa11y test file. Example:
import initStorypa11y from 'storybook-addon-storypa11y';
import contextHook from 'babel-plugin-require-context-hook/register';
contextHook();
initStorypa11y();
Credits
This addon is heavily based on the official storyshots addon and the amazing work done by all their contributors