애플리케이션의 품질과 안정성을 높이기 위해 사전에 결함을 찾아내고 수정하기 위한 행위주로 특정 모듈(컴포넌트)이 사양에 잘 동작하는지 자동화된 테스트로 검증테스트 코드를 작성할때 테스트 단위를 나누는 것이 중요하다. 모듈이 큰 범위로 결합되어있다면 넓은 범위로 검증을
인터페이스란? 서로 다른 클래스 또는 모듈이 상호작용하는 시스템내부구현에 대한 테스트는 캡슐화를 위반하게되며 깨지기 쉬운 테스트가 된다.잘못된 테스트 코드변경되는 상태가 많은 경우 테스트 코드 상에서 일일이 직접 변경해야하며 어떤 상황에서 변경되는 것인지 드러나지 않음

앱에서 테스트 가능한 가장 작은 소프트웨어를 실행해 예상대로 동작하는지 확인하는 테스트텍스트 필드 컴포넌트를 제작하여 단위 테스트를 진행한다. 먼저 해당 컴포넌트를 파악한다.placeholder 설정 className에 따른 css class 설정 텍스트를 입력할 때마

태스크 러너, 어설션 라이브러리, 플러그인 등 테스트 실행 및 검증에 필요한 환경을 제공하는 도구실습에 사용할 테스트 프레임워크는 vitest별다른 설정 없이 vite 기반에서 테스트 구동추가 설정 없이 ESM, TypeScript, JSX 사용 가능Jest 호환 AP
setup 테스트를 실행하기 전 수행해야하는 작업 -beforeEach : 파일 또는 스코프 내의 모든 테스트가 실행되기전에 beforeEach 함수내에 작성한 코드가 모두 실행됨 -beforeAll : 테스트 실행전에 호출되는 건 동일하지만, 파일 또는 스코프 전
ui 컴포넌트 테스트를 도와주는 라이브러리이며 핵심 철학이 있다면 ui컴포넌트를 사용자가 사용하는 방식으로 테스트한다는 것이다. 이를 위해서 DOM 노드를 쿼리하고 사용자와 비슷한 방식으로 이벤트를 발생해서 테스트를 진행한다. 이전에 생성한 textfield 컴포넌트에
앱에서 테스트 가능한 가장 작은 소프트웨어를 실행해 예상대로 동작하는지 확인하는 테스트 단위테스트 대상은 컴포넌트 뿐만 아니라 유틸 함수, 리액트 훅도 해당한다.https://github.com/practical-fe-testing/test-example-sh
React 16.8부터 추가되었으며, 컴포넌트 사이의 로직을 재사용, 비즈니스 로직을 분리하여 class 없이 리액트 기능을 활용할수 있게 해줌으로써 컴포넌트와 비즈니스의 결합도를 낮출 수 있다.NavigationBar 컴포넌트 하위에 존재하는 ConfirmModal
debounce 메소드를 단위테스트 해본다. 일정 시간이 흐른 뒤에 fn 함수를 호출하는 구조로 이루어져있다. 단, 여러번 호출을 한다고 해도 가장 마지막 호출을 기준으로 지정된 타이머 시간이 지나고 한번만 호출될 수 있게 설정했다.만약 테스트를 진행한다면 2가지로 나