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

ES6 간단하게 알고가기 선언 ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다. let 변수 const 상수 (배열과 오브젝트의 값 변경은 가능하다.) immutable array 기존 배열을 복제하여 사용한다. 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.) const a = [1,2,3]; const b = [...a]; 메서드 화살표함수(Arrow function) 클래스 개념 도입 setPrototypeOf 프로토타입 객체 추가 모듈(module) 프록시(proxy) startsWith(), endWith() 앞 뒤로 문자열 일치 여부 판단 includes() 문자열 포함 여부 판단 for-of for-i..

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를 사용해서 여러 테스트 케이스를 묶는다. 테스트 코드 작성 시의 이점은 리팩토링 이후 코드가 잘 동작하는지 검증하..