인프런 커뮤니티 질문&답변
작성한 질문수
"서버에서 데이터 가져올 때 에러 발생 시 처리" 강의에서 질문요
작성
·
192
0
안녕하세요
여행상품 앱 만들기에서
서버에서 데이터 가져올 때 에러 발생 시 처리 강의 보고 있습니다.
테스트 코드 아래 부분에서요.
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로 끝나는 엘리먼트들을 찾을 수 있는거죠?
감사합니다.
답변 1
1
안녕하세요 !!
1. 여기서 getByTestId하면 안되더라구요. findByTestId를 하는 이유가 궁금합니다.
2. 이전 강의 쿼리 우선순위에 다르면, ...byRole을 사용해서 찾을 것을 권장한다고 배웠습니다만, 여기서 왜 findByRole을 사용하지 않고, findByTestId 로 찾는지 궁금합니다.
======> error banner는 바로 나오는 것이 아닌 async 요청을 한 후에 나오는 것이기 때문에 get이 아닌 find을 사용해야합니다. find = get + waitFor
그리고 byRole과 Id사용은 강의에서 최대한 여러개를 사용하기 위함입니다. 둘 다 사용하셔도 됩니다.
3. 그리고 위 부분에 대한 질문입니다. findAllByRole에서 두번째 인자 옵션의 name을 주고 엘리먼트를 찾잖아요?
====> getByRole의 옵션은 이렇게 됩니다.
options?: {
exact?: boolean = true,
hidden?: boolean = false,
name?: TextMatch,
description?: TextMatch,
normalizer?: NormalizerFn,
selected?: boolean,
checked?: boolean,
pressed?: boolean,
current?: boolean | string,
expanded?: boolean,
queryFallbacks?: boolean,
level?: number,
}
여기서 alt 속성을 찾는것은 name 옵션입니다.
그래서 name을 사용하면 되며 product$ 는 정규식에서 $달러 사인은 문장의 끝을 나타냅니다.
그러기에 American product England product 모두 가져올수있게됩니다.
감사합니다.