React Testing Libraryの複数の要素で作られたテキストのテストで手こずった話

はじめに React Testing Library でテストを書いている際、<h2>こんにちは<strong> 世界</strong></h2> のように複数の要素で構成されたテキストのテストに手こずったため、備忘録として残しておきたいと思います。 どの場合にテキストの取得が難しいか <h1>合計¥10,000です</h1>のような単一の要素で作成されたテキストの取得は以下のようにgetByRole, getByTextで問題なく取得することが可能です。 const SingleElementText = () => { return <h1 data-testid="single-element-text">合計¥10,000です</h1>; }; // getByRole expect( screen.getByRole("heading", { name: "合計¥10,000です