"서버에서 데이터 가져올 때 에러 발생 시 처리" 강의에서 질문요

안녕하세요

여행상품 앱 만들기에서

서버에서 데이터 가져올 때 에러 발생 시 처리 강의 보고 있습니다.

테스트 코드 아래 부분에서요.

const errorBanner = await screen.findByTestId("error-banner");

1. 여기서 getByTestId하면 안되더라구요. findByTestId를 하는 이유가 궁금합니다.

2. 이전 강의 쿼리 우선순위에 다르면, ...byRole을 사용해서 찾을 것을 권장한다고 배웠습니다만, 여기서 왜 findByRole을 사용하지 않고, findByTestId 로 찾는지 궁금합니다.

------

  // Products.js
     <img
        style={{ width: "75%" }}
        src={`http://localhost:5000/${imagePath}`}
        alt={`${name} product`}
      />


// Type.test.js
  const productImages = await screen.findAllByRole("img", {
    name: /product$/i,
  });
  expect(productImages).toHaveLength(2);

3. 그리고 위 부분에 대한 질문입니다. findAllByRole에서 두번째 인자 옵션의 name을 주고 엘리먼트를 찾잖아요?

여기서 name이 무엇을 의미하는거죠? html 태그 속성의 name은 아닌것같아보이는데,

예를 들면, Products컴포넌트에서 이미지 태그에는 alt 값에 America product, England product 이런 식으로 들어가잖아요. 근데 어떻게 { name: /product%/i } 로 찾을 수 있는거죠? img태그엔 name이 없었고, alt만 있는데, 어떻게 role 이 img이고 name이 끝이 product로 끝나는 엘리먼트들을 찾을 수 있는거죠?

감사합니다.