Testing Libraryで<td>要素に関するテストを書く場合、getAllByRoleで<td>タグを取得する方法と<tr>タグで一度対象の列を取得したのち<td>タグを取得する方法がある。
<td>タグを直接取得する方法
getAllByRoleでARIA roleのcellを指定して取得できる。<td>（テーブルセル）は複数存在するため、Allをつけて取得しないと対象が特定できない。
この方法を用いる場合、コンポーネントテスト用のモックは少ない行にしておく。セルの量が多いと何個目かを数えるのが大変だし、後からテストケースを見たときどこをテストしているのかわかりづらい。また、列の追加でセルの位置がずれると再度数え直しになる。列数が少なく、コンポーネントテスト用モックパラメータの数も少なめであれば採用しても良い。
// ブログリストを一覧で表示するコンポーネント it("記事IDの列はpostsのidが表示される", () => { const content = render( <BlogList blogList={blogPostsMock} userList={usersMock} /> ); // テーブルセルを全て取得 const td = content.getAllByRole("td"); // 一番初めに出てきたtd要素に記事IDが表示されているか確認 expect(td[0].querySelectorAll("td")[0]).toHaveTextContent("1"); });
<tr>をgetAllByRoleのrowで取得する
こちらはテーブル行が多くても対象を特定しやすい。一度行を特定し、その後セルを特定するため探しやすいのである。
ただし、<tr>をgetAllByRoleで取得した結果はHTMLElement[]型で返ってくる。素のHTMLElementなのでTesting LibraryのgetByRoleをさらに利用してクエリを書けない。querySelectorAll1を使って要素を取得し、値を持っているかなどを検証するのが良い。
it("記事IDの列はpostsのidが表示される", () => { const content = render( <BlogList blogList={blogPostsMock} userList={usersMock} /> ); // 二列目のtr要素を取得。ヘッダー行にも一列あるため二列目から始めること const tr = content.getAllByRole("row"); // 二列目のtr要素に記事IDが表示されているか確認 expect(tr[1].querySelectorAll("td")[0]).toHaveTextContent("1"); });
