인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

KIP님의 프로필 이미지
KIP

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

Jest 파일 구조 및 사용법

안녕하세요 이번 강좌와 리액트 테스트강좌질문입니다

해결된 질문

작성

·

207

0

안녕하세요.

처음 강좌 신청할 때 tdd도 있길래 넷플릭스 강좌에서 이어 진행하시는 줄 알았는데, 이번 강좌에 test는 가볍게 다루셨군요..ㅠㅠ

예전 react test(jest) 강좌를 들었어서, 이번 netflix강의에도 혼자 tdd를 진행하려 하는데, 조금 궁금한 점이 생겼습니다.

  1. 테스트를 진행할 때 props를 사용하는 컴포넌트에 대해서는 어떻게 하나요?(이전 react-test강좌에서는 contextAPI를 사용하셨는데, 그때 props로 내린 데이터를 가진 컴포넌트에 대해서는 테스트를 진행하지 않으셔서 여쭤봅니다.)

  2. netflix클론 정도의 규모만 해도 api가 많아 생각보다 까다로운 것 같습니다. 어떤 기능에 대해서 테스트를 집중적으로 하는지 방법? 이나 강사님의 조언을 듣고 싶습니다. (하나하나 단위 테스트를 실제로 진행하는 게 맞을까요? 아직 test는 익숙치 않네요..)

답변 1

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 KIP님

우선 두 강의 다 수강해주신 점 너무 감사합니다.

첫 번째 질문에서는 props로 내려주는 부분은

test("displays product images from server", async () => {
  render(<Type orderType="products" />);

  // 이미지 찾기
  const productImages = await screen.findAllByRole("img", {
    name: /product$/i,
  });
  expect(productImages).toHaveLength(2);

  const altText = productImages.map((element) => element.alt);
  expect(altText).toEqual(["America product", "England product"]);
});


이런 식으로 <Type orderType="products" /> 이 부분이 테스트할 때 props로 내려주는 부분입니다 ~

혹시 제가 질문을 잘못 이해했나요 ~?

두 번째 질문에서는 실무에서는 테스트 작성은 사실 많이 주관적인 것 같습니다.

최대한 모든 부분을 위해서 작성하는 게 좋긴 하지만 (테스트만 작성하다 보면 또 금방 작성하실 수는 있습니다 적응이 되다 보니...)

실제로 모든 부분을 작성하는 것은 시간이 너무 많이 걸릴 것 같다고 생각하면 개발자 본인이 봤을 때 에러가 날 수 있을 것 같은 부분에 테스트를 작성해주는 게 좋을 것 같습니다. 답변을 적고 보니 너무 주관적인 답변이 되었네요. 결국은 회사 사정에 따라서 바뀌는 것 같습니다. 철저한 테스트를 원하는 회사면 다 작성할 것이고 그렇지 않은 회사는 아예 작성 안 하는 곳도 많습니다!

감사합니다

 

 

KIP님의 프로필 이미지
KIP
질문자

네 감사합니다 제가 추상적으로 질문을 드렸네요 ㅠ 그래도 어떤 말씀이신지 알 거 같습니다.

test는 제가 혼자서 공부해보고 다시 질문드리겠습니다!

boiler-plate부터 테스트까지 한 5개 정도? 수강한 거 같네요 처음 볼 때랑 2번째 볼 때 또 다르고, 지금 보니까 또 다르네요. 처음 볼 때는 무슨 말인가 했던 것들이 이제는 document찾으면서 왜 그랬는지 생각하고 혼자서 끄적거릴 정도는 온 것 같습니다. 6개월 전에 깃헙에 아무것도 모르고 주석만 주구장창 달아놨던 제가 신기하네요.

KIP님의 프로필 이미지
KIP

작성한 질문수

질문하기