테스트 환경은 다음과 같습니다. - 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내부에서 바로 확인할 수 있게끔 컴포넌트화 했다는 점이다. 별도의 스타일 코드로 이동해 확인할 필요가 없고, 직관적으로 어떤 컴포넌트들이 반응형에 따른 분기 처리가 되는지 알 수 있으니 장점이 많다 하겠다. 테스트 코드와 함께 사용 시 발생하는 문제점 하지만 이 컴포넌트는 아쉽게도 테..

React Testing 💡 Jest, ReactTestingLibrary로 Testing 환경을 구축했던 경험을 공유한다. 도입 취지 TDD(Test Driven Development)가 아니라도 테스트를 통해 비즈니스의 핵심 로직 검증만이라도 가능하다면, 코드의 리팩토링이나 기능의 추가, 수정 시에 더욱 안정성을 가질 수 있다고 생각되었음. 공통적인 테스트 코드 환경 구축 및 컨벤션이 있다면 최소한의 노력으로 최대한의 효과를 볼 수 있을거라 기대됨. 환경 구축 설치 💡 CRA기준으로는 이미 jest가 설치되어 있고, 다른 툴체인에서는 jest를 설치해준다. 그 외 설치 필요한 항목 yarn add@testing-library/react@types/jest ts-jest @testing-library/..