Storypa11y

StoryShots 为 Storybook 添加了自动化的 Jest 可访问性测试。它在测试套件中使用 pa11y。

要使用 Storypa11y，您必须使用现有的 Storybook 故事作为 Jest 测试的输入。

入门

将以下模块添加到您的应用程序中。

npm install --save-dev storybook-addon-storypa11y

快速入门

创建一个与您的 Jest 测试正则表达式匹配的文件，并添加以下代码

import { initStorypa11y } from 'storybook-addon-storypa11y';

initStorypa11y();

这将创建一个测试套件，用于测试所有故事的可访问性。

选项

您可以将一个选项对象传递给 initStorypa11y 函数，该函数接受多个键

suite: 'My suite'
storyKindRegex: /^((?!.*?Fail).)*$/,
storyNameRegex: /^((?!.*?SomeStory).)*$/,
out: 'storybook-static',
test: pa11y,

套件

将生成的测试套件的名称。

storyKindRegex

您可以传递一个正则表达式，仅将匹配的故事种类包含在可访问性测试中。

storyNameRegex

您可以传递一个正则表达式，仅将匹配的故事包含在可访问性测试中。

输出

从项目根目录到构建 Storybook 的文件夹的相对路径。默认为 storybook-static。

pa11yOptions

将直接传递给 pa11y 的选项。请参阅 其文档 以了解可以传递的内容。还可以查看 Storypa11y 设置的 默认选项。

测试

还可以传递您自己的测试函数。请参阅 stories/failing.test.js 以了解示例。

故障排除

ReferenceError: __requireContext 未定义

如果您使用 webpack 的 require.context 功能来收集所有 Storybook 故事，则可能会发生这种情况。它在 Jest 环境中不可用，我们可以通过添加一个 Babel 插件来提供相同的接口来解决此问题。

• 使用 npm install --save-dev babel-plugin-require-context-hook 安装插件
• 将插件添加到您的 pa11y 测试文件。示例

import initStorypa11y from 'storybook-addon-storypa11y';
import contextHook from 'babel-plugin-require-context-hook/register';

contextHook();
initStorypa11y();

致谢

此插件很大程度上基于 官方的 storyshots 插件 以及所有其 贡献者 所做的出色工作。