Vitestで要素の取り方を確認する

確認方法

test("確認", async () => {
  render(<App />);

  screen.getByRole();
});

確認結果

 FAIL  src/App.test.tsx > 確認
TestingLibraryElementError: Unable to find an accessible element with the role "undefined"

Here are the accessible roles:

  heading:

  Name "学習記録":
  <h2
    class="chakra-heading css-0"
  />

  --------------------------------------------------
  button:

  Name "新規登録":
  <button
    class="chakra-button css-4xx2wk"
    type="button"
  />

  --------------------------------------------------
  table:

  Name "":
  <table
    class="chakra-table css-0"
  />

  --------------------------------------------------
  rowgroup:

  Name "":
  <thead
    class="css-0"
  />

  Name "":
  <tbody
    class="css-0"
  />

  --------------------------------------------------
  row:

  Name "タイトル 学習時間 削除":
  <tr
    class="css-0"
  />

  Name "Reactの学習 1":
  <tr
    class="css-0"
  />

  Name "AWSの学習 3":
  <tr
    class="css-0"
  />

  --------------------------------------------------
  columnheader:

  Name "タイトル":
  <th
    class="css-0"
  />

  Name "学習時間":
  <th
    class="css-0"
  />

  Name "削除":
  <th
    class="css-0"
  />

  --------------------------------------------------
  cell:

  Name "Reactの学習":
  <td
    class="css-0"
  />

  Name "1":
  <td
    class="css-0"
  />

  Name "":
  <td
    class="css-0"
  />

  Name "AWSの学習":
  <td
    class="css-0"
  />

  Name "3":
  <td
    class="css-0"
  />

  Name "":
  <td
    class="css-0"
  />

  --------------------------------------------------

確認結果を元にテストを書く

test("新規登録ボタンが表示される", async () => {
  render(<App />);

  expect(screen.getByRole("button", { name: "新規登録" })).not.toBeNull();
});