🐧

Unable to find an accessible element with the role .. and name ..の解決方法

2022/04/19に公開

React

Testing Library

tech

はじめに

こちらのQiita記事を参考に自分のPJのテストコードを改善していた

その中でも、「間違ったクエリを使っている」というセクションで、HTML要素を取得する際はできるだけエンドユーザーの操作方法に近い形で取得をするように記載があった。そのため、

- screen.getByTestId('zoom-out-action-button')
+ screen.getByRole("button", { name: /-/i })

としたのだが、そこでエラーが発生。

 TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/zoom-out/i`

むむむ。

動作環境

package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "12.1.2",
}

結論

出力されたログにはまだ続きがある

Here are the accessible roles:

  button:

  Name "縮小":
  <button
    aria-label="縮小"
    class="sc-hKMtZM hqxnsY"
  />

そして実際のHTML↓

<button onClick={zoomOut} aria-label="縮小" zoom-type="out">
  -
</button>

つまり、本来は-がnameとして認識されるはずなのだが、testing-libraryでは縮小がnameとして認識されている。

勘の良い方はお気づきかもしれないが、原因はbutton要素についているaria-label属性にある。

これに関しては、ドキュメントにも記載があった。

You can query the returned element(s) by their accessible name or description. The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute. It can be used to query a specific element if multiple elements with the same role are present on the rendered content.

試しに、aria-label属性を消してみると、

screen.getByRole("button", { name: /-/i })

でテストが通った。

最後に

WEB ARIAはコンテンツの中身や状態を適切にエンドユーザーに伝える役割があるため、testing-libraryの思想から見ても、aria属性があった場合そちらを優先するのはかなり自然なことに感じるとともに、とても共感できた。

おまけ

つまずく原因となったソースを記載しておきます。

こちらは以前CSSでページを拡大縮小するという記事で作成したデモページのソースになります。

はじめに

動作環境

結論

最後に

おまけ

Discussion