인프런 커뮤니티 질문&답변
작성한 질문수
2.1강 테스트에서 헷갈리는 부분이 있습니다.
해결된 질문
작성
·
154
·
수정됨
0
안녕하세요. 몇가지 의문이 있어 질문 드립니다.
올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데,
className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요?
getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요?
아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ
답변 2
0
안녕하세요! albert H님
비슷한 맥락의 질문이 이전에 올라온적이 있어서 이 글을 공유 드립니다.
해당 관점에서 의문을 가지시는 것은 당연하실 것 같아서요!
요기 작성된 부분 확인해주시고 혹시 더 궁금하신 점 있으시다면 편하게 댓글 또는 글로 남겨주세요!
안녕하세요! 제가 답변이 조금 늦었던 것 같네요.
우선 해당 챕터는 "리액트 훅 테스트" 라는 맥락에서 해당 코드를 소개하는 예시라고 봐주시면 좋을 것 같습니다.
추가로, 저희들이 일반적으로 훅에는 비즈니스 로직들을 모으는 곳이기 때문에 그 자체를 테스트 하는 경우들이 굉장히 많고 중요한데요. 저희들이 강의에서 계속 언급하는 것처럼 훅 또한 테스트 할 때 외부로 공개하는 인터페이스를 기반으로 테스트를 작성하게 되어야 합니다. 그게 실제 state를 다루는 부분들이 있다보니까 이게 내부 구현값을 결국 건드리는게 아닐까?라고 보실 수 있을 것 같습니다.
만약, 해당 state들이 외부에 공개되지 않고 내부 로직에서만 사용이 되어야 하며 실제 비즈니스 로직에 큰 영향을 주지 않는다면 테스트를 작성할 필요는 없습니다.
추가로 궁금한점 있으시면 댓글 남겨주세요!
0
안녕하세요, 인프런 AI 인턴입니다.
albet H님의 질문에 관하여, “실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트” 코스의 내용과 관련된 유사한 질문과 답변 링크를 찾았습니다. 질문하신 내용은 올바른 테스트 작성 규칙과 테스트의 종속성 문제에 대한 것으로, 여기에 대한 해명과 추가적인 설명을 드리고자 합니다.
className prop이 css class에 적용되는지, focus 시 border 스타일이 변경되는지 테스트하는 것이 UI와 관련되어 있다고 말씀하신 부분에 대해서, “2.1장 ClassName props으로 설정한 css class 가 적용된다 가 유의미한 테스트일까요” 질문에서 비슷한 고민을 한 수강생과의 인사이트가 공유되었습니다. 이 글에서는 단위 테스트의 의도와 목적을 보여주기 위해 className prop을 받아 스타일을 설정하는 기본적인 기능까지 테스트 코드로 작성하는 것의 필요성에 대한 설명이 포함되어 있습니다. 명확한 타입의 props를 받고 UI만 렌더링하는 표현적 컴포넌트의 경우 테스트 코드 작성에 대한 다양한 관점을 제공하고 있습니다.
getByPlaceholder API와 관련하여 구현 코드에서 placeholder 내용이 변경될 때 발생하는 테스트 코드의 수정 필요성에 대해서는, “2.1강 storybook & vitest”에서는 아니지만, 엄밀히 말해 placeholder 내용이 변경되면 테스트 코드도 수정해야 할 경우가 있다는 점이 실질적으로 테스트의 종속성과 관련된 문제를 제시합니다. 다만, 특정 내용보다는 getByRole이나 getByTestId와 같이 보다 견고한 선택자를 사용하여 이러한 종속성을 최소화하는 방법에 대한 고민을 할 수 있습니다.
이러한 테스트 작성과 관련된 질문과 고민은 처음 테스트를 접하거나 심화적으로 배우려는 모든 개발자가 겪는 일반적인 과정일 수 있습니다. 따라서 여러 관점에서의 최선의 접근 방법을 모색하면서 학습을 진행하는 것이 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
안내 감사합니다!
2.1강 내용은 테스트를 생략할수도 있는 단순한 기능들이지만 강의에선 단위 테스트의 이해를 돕기 위해 진행한 것이라고 이해했습니다.
그런데 여전히 아리까리한 부분들이 있어 추가 질문드려요.
올바른 테스트 작성 규칙에서 "캡슐화된 내부 구현에 대한 테스트 코드를 작성하지 말자." 라고 하셨고 잘못된 테스트 코드 예시에서 state를 조작하는 코드가 나와있었습니다.
(
SpecificComponent.setState({ isShowModal : true });)그래서 저는 이 부분을 'state' 같은 내부 구현 값을 테스트하지 말라는 것으로 이해했는데 3.3강(리액트 훅 테스트)의 내용을 보면 모두 'isModalOpen' 이라는 state값을 검증하는 작업들이더라구요. 사실상 UI컴포넌트가 아니면 이런 훅이나 일반 함수의 테스트는 내부값을 테스트 할 수 밖에 없는거 같기도 하구요.
"내부 구현에 대한 테스트 코드를 작성하지 말자." 는게 테스트 코드에서 직접 state를 조작하지 말라는 뜻이고, state의 결과값을 검증하기만 하는 작업은 '내부 구현에 대한 테스트'에 해당하지 않는 것인지 궁금합니다.
아니면 제가 완전히 잘못 이해하고 있는걸까요? "내부 구현에 대한 테스트"의 의미를 조금 더 보충해주시면 감사하겠습니다.
아직까진 개념들이 머릿속에 두루뭉실하게 잡혀있어서 질문도 두루뭉실하게 하게 되는것 같아요... 부디 전달이 잘 되기를 바라며 답변 기다리겠습니다. 감사합니다!