React 테스트
React Testing Library, Jest, Vitest, 컴포넌트 테스트, mocking, 사용자 인터랙션, coverage
1React Testing Library에서 getBy, queryBy, findBy의 주요 차이점은 무엇인가요?
React Testing Library에서 getBy, queryBy, findBy의 주요 차이점은 무엇인가요?
답변
getBy는 요소가 존재하지 않으면 에러를 던집니다(동기적 assertions). queryBy는 요소가 존재하지 않으면 null을 반환합니다(부재 확인). findBy는 비동기 요소를 위해 Promise를 반환합니다. 반드시 존재해야 하는 요소에는 기본적으로 getBy를, 요소가 존재하지 않는지 확인할 때는 queryBy를, 지연 후 요소가 나타나기를 기다릴 때는 findBy를 사용하세요.
2getByTestId에 비해 getByRole의 주요 장점은 무엇인가요?
getByTestId에 비해 getByRole의 주요 장점은 무엇인가요?
답변
getByRole은 시맨틱 ARIA role(button, textbox, heading)로 요소를 대상으로 하여 접근성 모범 사례를 장려하며, 스크린 리더를 위한 컴포넌트 접근성을 향상시킵니다. getByTestId는 최종 사용자에게 가치를 제공하지 않는 인위적인 data-testid 속성을 추가해야 합니다. React Testing Library는 getByTestId보다 getByRole, getByLabelText, getByText를 우선 사용할 것을 권장합니다.
3DOM에 존재하지 않는 요소의 조건부 렌더링을 어떻게 테스트하나요?
DOM에 존재하지 않는 요소의 조건부 렌더링을 어떻게 테스트하나요?
답변
queryBy를 사용하여 요소의 부재를 확인하세요. 에러를 던지는 대신 null을 반환하기 때문입니다. 예시: expect(screen.queryByText('Error')).toBeNull() 또는 expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy는 에러를 던져 테스트를 실패시키고, findBy는 요소가 나타나기를 기다립니다(부재 시 timeout).
React Testing Library가 구현 세부 사항을 테스트하지 않도록 권장하는 이유는 무엇인가요?
React Testing Library에서 render와 screen의 차이점은 무엇인가요?
+17 면접 질문