getByrole을 통해 얻은 htmlElement 객체에 prefix에 aria

Question

안녕하세요 john ahn님. 강의를 수강하면서 궁금한 점이 있어 여쭙니다. 저는 react, typescript 환경으로 tdd 강의를 수강하고 있는데요. 코드를 따라 치던 중 getByRole이 HTMLelement 객체를 반환하는데 checked랑 disabled는 없고 prefix에 aria가 붙은 aria-checked와 aria-disabled만 존재합니다. 질문은 prefix에 aria가 붙은 value를 사용해도 되는지가 궁금합니다. 그리고 aria로 사용해도 될지 몰라서 matcher에다 expect ( checkbox ). not . toBeChecked (); 이런 코드를 작성했는데, 똑같은 효과를 얻을 수 있는 지도 궁금합니다. 감사합니다.

윤영훈 · Answer

import { render, screen } from "@testing-library/react"; import OrderPage from "../OrderPage"; test("주문 확인을 위한 체크박스가 있고 타이틀은 '주문하려는 것을 확인하셨나요?' 입니다. ", () => { render(<OrderPage />); const checkbox = screen.getByRole("checkbox", { name: "주문하려는 것을 확인하셨나요?", }) as HTMLInputElement; expect(checkbox.checked).toEqual(false); const confirmButton = screen.getByRole("button", { name: "주문 확인", }) as HTMLButtonElement; expect(confirmButton.disabled).toBeTruthy(); }); 저는 이런식으로 작성했습니다!