inflearn logo
강의

講義

知識共有

実務にすぐに適用できるフロントエンドテスト - 1部。テストの基礎:単体テスト・結合テスト

로딩/에러처리 검증은 어떻게 하는게 좋을까요?

65

EUNSUN KIM

投稿した質問数 1

0

안녕하세요.

API 요청이 포함된 컴포넌트를 대상으로 단위/통합 테스트할때 요청 상태에 따라 로딩, 에러 UI가 적절하게 렌더링 되는지도 검증을 해야하는지 궁금합니다.

해야한다면, API 호출하는 모든 테스트에서 로딩/에러 UI 검증을 하는게 일반적이고 맞는 건지, 아니면 제 경우에는 ErrorBoundary랑 Suspense를 다음처럼 합쳐서 에러/로딩 처리용 wrapper(?)를 만들었는데, 이런 wrapper 테스트를 따로 작성하는게 맞는건지.. 궁금합니다 ㅎㅎ..

interface ComposedBoundaryProps extends ErrorBoundaryPropsWithRender {
  suspenseFallback: ReactNode;
  children: ReactNode;
  reset: () => void;
}

const ComposedBoundary = ({
  suspenseFallback,
  children,
  fallbackRender,
  reset,
}: ComposedBoundaryProps) => {
  return (
    <ErrorBoundary
      onError={(error: unknown) => {
        // ...
      }}
      onReset={reset}
      fallbackRender={fallbackRender}
    >
      <Suspense fallback={suspenseFallback}>{children}</Suspense>
    </ErrorBoundary>
  );
};



javascript react 소프트웨어-테스트 vitest

回答 1

0

hanjungv

안녕하세요! 좋은 질문이네요.

단순히 API 호출에 대한 것이 아닌 Error Boundary나 Suspense가 단순히 리액트 기능상 표준화된 제대로 동작하는 것을 검증하는 것이 아니라, 노출되는 조건이 복잡하거나 비즈니스 로직이 얽혀있는 경우에는 테스트를 진행하는 것이 좋아보입니다.

말씀해주신대로 합성해서 사용할 수 있도록 여러 기능을 래퍼 형태로 작성해뒀다면, 검증을 진행하는 것이 좋습니다. ErrorBoundary와 Suspense가 함께 관리되는 컴포넌트기도 하고, 여러 곳에서 사용할 수 있는 공용 컴퍼넌트니까요.

추가로 궁금하신점 있으면 편하게 질문주세요! 감사합니다.

1

EUNSUN KIM

빠른답변 감사합니다!

1

EUNSUN KIM

빠른답변 감사합니다!

mockZustand

0

64

2

프로젝트 세팅 오류 및 버전 오류 문제 문의

0

95

2

toggleIsModalOpened 테스트 할때 궁금한 점이 있습니다.

0

42

2

통합 테스트에서 API 요청에 대한 검증은 이루어지지 않아도 괜찮을까요?

0

68

2

lint에러..

0

71

1

단언문 순서에 따라 테스트 결과가 왜 달라지나요?

0

108

2

useNavigate 테스트 시, 검증 대상 질문입니다.

0

113

2

강의 예시프로젝트 업데이트좀 부탁드립니다.

2

165

2

통합테스트와 단위테스트 파일 분리

0

108

1

grid 양옆에 margin은 어디서 설정되어있는건가요 ?

0

131

1

vitest 설치했는데

0

204

2

2부 할인쿠폰 관련

0

176

1

에러 해결 방법

0

406

2

직접 구현한 atom 컴포넌트 테스트 범위 질문

0

175

1

setup, teardown 동작 순서

0

211

1

debounce 함수 테스트 정확도 관련 질문입니다.

0

175

2

ProductFilter test 어떤 방식이 더 선호되는 방식일까요?

0

203

2

통합 테스트 작성 방식에 대해 궁금한 점이 있습니다

0

258

2

vitest Extension 알려주세요.

0

266

1

2.1 강의 질문있습니다.

0

139

1

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.

0

245

2

toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.

0

194

2

TestPayment에 쿠폰 정보를 prop으로 전달하는 이유

0

184

2

NavigationBar 테스트 속도가 너무 느린 문제

0

217

1