주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 비동기적으로 바뀌는 컴포넌트 UI 테스트 비동기적으로 바뀌는 컴포넌트 UI 테스트 Async Utilities 함수를 사용 wait 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기 timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능) 리액트 16.8 버전 버그있음 waitForElement 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..) 프로미스가 끝날때 선택한 엘리먼트 resolve waitForDomChange 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지..

react-testing-library 를 사용한 리액트 컴포넌트 테스트 react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행 필요한 기능만 지원해서 가볍다 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다. props, state 조회하는 작업을 하지 않음 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음 CRA 프로젝트 생성 react-testing-library, jest-dom 설치 jest-dom은 jest 확장, dom관련 matcher를 추가해준다. vscode 사용 시 @types/jest 도 같이 설치 테스트 코드 작성 테스팅 스냅샷 테스팅 ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 ..

Enzyme를 사용하여 리액트 컴포넌트 테스트 테스트 소개 가장 기본적인 방법은 내부 유틸 함수인 react-dom/test-utils 사용한다. 하지만 복잡하고 불편한 점이 있기 때문에 리액트 공식문서에서도 테스팅 라이브러리 사용을 권장한다. react-testing-library를 권장하며 Enzyme를 대체하여 사용할 수 있다고 언급한다. 두 라이브러리는 서로 다른 철학을 가지고 있다. Enzyme 컴포넌트 내부 기능 집중 post나 state 확인 컴포넌트 내장 메서드를 직접 호출 react-testing-library 렌더링 결과에 집중 컴포넌트 인스턴스에 신경쓰지 않고 화면에 보여지는 것 이벤트 발생 시 화면의 변화에 대한 부분에 최적화 사용자 관점에서 테스팅하기 용이하다. Enzyme 1. ..

자바스크립트-테스팅의-기초 유닛테스트 작은단위로 기능을 잘게 조개서 잘 동작하는지 확인 기능 단위 통합테스트 전체적으로 동작이 잘되는지 확인 컴포넌트 상호작용 테스트 도구 종류는 다양하고 여러 목적에 따라 특출난 것들이 있으니 확인 후 선정하면 될 듯 아래는 테스트도구 10개를 소개하는 글이다. http://www.itworld.co.kr/news/128974 원본 글에서는 설정이 간단하고 시작하기 편하다며 Jest를 사용했다. jset와 @types/jest를 npm install한다. -함수를 만들었으면 test함수도 만든다. -test 키워드 대신 it 키워드를 쓴다. -describe를 사용해서 여러 테스트 케이스를 묶는다. 테스트 코드 작성 시의 이점은 리팩토링 이후 코드가 잘 동작하는지 검증하..