테스트 환경은 다음과 같습니다. - jest (27.0.6 -> 28.1.3) - jsdom (16.6.0 -> 19.0.0) - @testing-library/react (12.0.0) - @testing-library/user-event (13.5.0) 1. JSDOM 환경에서 innerText 감지 불가 Select 컴포넌트를 확장한 DropdownSelect 컴포넌트의 테스트를 하던 중, 선택된 값을 감지할 수 없는 이슈가 발생했습니다. (Select 컴포넌트는 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컴포넌트로, Renderer 컴포넌트를 동적으로 받아 다양한 요구사항에 대응할 수 있는 컴포넌트입니다) 문제가 발생한 테스트는 DropdownSelect에서 특정 값을 선택하는 과정이 포..

반응형 컴포넌트 React를 사용해서 반응형 웹을 만들어 본 사람이라면, 반응형 레이아웃에 대응하기 위해 아래와 같은 컴포넌트(혹은 비슷한 역할을 하는 컴포넌트)를 만들어 본 경험이 있을 거라 생각한다. 예시 1 레이아웃에 따라 렌더링 할 컴포넌트를 분기하는 Switch 컴포넌트 예시 2 children의 노출 여부를 명시하는 Display 컴포넌트 두 컴포넌트의 공통점은 무엇일까? 바로 반응형 레이아웃에 대한 처리를 JSX내부에서 바로 확인할 수 있게끔 컴포넌트화 했다는 점이다. 별도의 스타일 코드로 이동해 확인할 필요가 없고, 직관적으로 어떤 컴포넌트들이 반응형에 따른 분기 처리가 되는지 알 수 있으니 장점이 많다 하겠다. 테스트 코드와 함께 사용 시 발생하는 문제점 하지만 이 컴포넌트는 아쉽게도 테..