Storypa11y

StoryShots 為 Storybook 新增了自動 Jest 無障礙測試。它在其測試套件中使用 pa11y。

要使用 Storypa11y，您必須使用您現有的 Storybook stories 作為 Jest 測試的輸入。

開始使用

將以下模組新增到您的應用程式中。

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

快速入門

建立一個符合您的 jests 測試 regex 的檔案，並新增以下程式碼

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

initStorypa11y();

這將建立一個測試套件，測試您所有 stories 的無障礙性。

選項

您可以將一個選項物件傳遞給 initStorypa11y 函式，該物件會採用多個鍵

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

suite

將產生的測試套件的名稱。

storyKindRegex

您可以傳遞一個 regex，以僅包含符合的 story 種類進行無障礙測試。

storyNameRegex

您可以傳遞一個 regex，以僅包含符合的 stories 進行無障礙測試。

out

從專案根目錄到您建置 storybook 的資料夾的相對路徑。預設值為 storybook-static。

pa11yOptions

將直接傳遞給 pa11y 的選項。請參閱 他們的說明文件，以了解可以傳遞的內容。另請檢查 Storypa11y 設定的預設選項。

test

也可以傳遞您自己的測試函式。請參閱 stories/failing.test.js 中的範例。

疑難排解

ReferenceError: __requireContext 未定義

如果您使用 webpack 的 require.context 功能來收集您所有的 storybook stories，則可能會發生這種情況。它在 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 擴充功能以及所有貢獻者的精彩工作