inflearn logo
강의

講義

知識共有

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

3.2. モジュール モッキング(Mocking)

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

113

Einere

投稿した質問数 4

0

뒤로 이동 버튼을 눌러 페이지 전환이 잘 되었음을 검증하고 싶으면 history web api 등을 이용해서 검증하는게 더 올바르지 않나요??

왜 useNavigate 의 반환 함수의 인자로 검증하는지 궁금합니다~

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

回答 2

0

hanjungv

안녕하세요! 답변을 남기려고 했는데, 아래 AI가 답변을 나름 정확하게 남겨놨네요 ㅎㅎ
단위 통합테스트에 있어서는 실제 페이지 이동이 올바르게 되었는지를 검증하기 어렵기 때문에, 그리고 해당 동작을 구현하는데 있어서 이미 구현되어있는 라이브러리를 사용하기 때문에 말씀해주신것처럼 검증을 한다고 해서 더 높은 신뢰성을 얻기는 어려울 것 같아요. 모킹의 어려움, 복잡성도 더 늘어날 것 같구요.
이같은 맥락에서 아래 답변을 참고해주시면 감사하겠습니다!

1

Einere

강의를 조금 더 보고 나니 이해가 되었습니다.

뒤로가기 동작 자체는 별도의 테스트를 통해 신뢰성을 확보하고,
해당 테스트에서는 어찌되었건 특정 이벤트 핸들러가 잘 호출되는지를 분리해서 테스트를 하는 것으로 이해했습니다.
감사합니다.

0

hanjungv

감사합니다! 또 궁금한 점 있으시면 편하게 남겨주세요!

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. Einere님.
useNavigate를 사용하여 뒤로 가기 기능을 테스트할 때의 접근 방식에 대한 질문이군요.

기본적으로 useNavigate는 React Router에서 제공하는 훅으로, 페이지 내비게이션을 위해 사용됩니다. useNavigate의 반환 함수가 실제 내비게이션을 수행하는 함수입니다. 따라서 테스트에서는 이 반환된 함수가 올바르게 호출되는지를 확인하는 것이 모킹(mocking)을 통한 일반적인 접근 방식입니다.

모킹을 통해 반환 함수가 예상대로 호출되었는지를 검증함으로써 사용하는 API나 라이브러리의 동작 자체를 검증하는 대신, 우리 코드의 로직이 의도한 대로 흘러갔는지를 확인할 수 있게 됩니다. 이는 특히 단위 테스트에서 중요하며, 다른 API에 대한 의존성을 줄이고 우리가 원하는 로직을 정확히 검토할 수 있습니다.

하지만 실제 내비게이션의 작동 여부를 테스트하려면, 브라우저 환경에서 이루어지는 E2E (End-to-End) 테스트나 통합 테스트가 필요합니다. 여기서는 실제로 페이지가 이동했는지를 history 객체 등을 통해 확인할 수 있습니다.

관련하여 유사한 논의를 포함하고 있는 기존 질문을 통해 구체적인 예시와 설명을 확인하실 수 있습니다:
- “navigate 관련 테스트에서 질문있습니다!”에서는 useNavigate를 모킹하여 테스트하는 방법과 통합 테스트에서의 검증 방법에 대해 설명하고 있습니다.
- “공용 컴포넌트 유닛 테스트 관하여 질문이 있습니다!”에서는 상태 테스트와 스파이 함수를 통해 테스트하는 방법과 그 이점을 다루고 있습니다.

위 질문과 답변을 참고하여, 보다 구체적인 시험 전략을 세울 수 있을 것이라 생각됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

mockZustand

0

64

2

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

0

95

2

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

0

42

2

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

0

65

1

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

0

68

2

lint에러..

0

71

1

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

0

108

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