react-testing-library - この場合、getByRole が機能しないのはなぜですか?

Question

自分の主張がうまくいかない理由を理解するのに苦労しています。

DOM は次のとおりです。

<h4>
  <span aria-hidden="true">foo</span>
  <span>bar</span>
</h4>

そして、ここに私の主張があります：

screen.getByRole('heading', { name: /foo/i, hidden: true })

非表示フラグに関するドキュメントを読みましたが、これが機能しない理由を理解するのにまだ問題があります。

何か案は？

Answer 1

問題は、見出しの役割を持つ h1 に設定されていないため、aria-hidden 属性を設定する場所にあると思います。

h1 タグ内に aria-hidden を設定すると、テストが失敗するCodeSandBox デモを作成しました。