Peep

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library

• Enzyme과 달리 모든 테스트를 DOM 위주로 진행
• 필요한 기능만 지원해서 가볍다
• 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다.
• props, state 조회하는 작업을 하지 않음
• 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음

1. CRA 프로젝트 생성
2. react-testing-library, jest-dom 설치
   1. jest-dom은 jest 확장, dom관련 matcher를 추가해준다.
   2. vscode 사용 시 @types/jest 도 같이 설치
3. 테스트 코드 작성
4. 테스팅

스냅샷 테스팅

ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 업데이트)

쿼리함수

ㄴ react-testing-library 기반 dom-testing-library에서 지원하느 함수들

ㄴ Variant, Queries의 조합으로 네이밍이 이루어짐

react-testing-library 를 사용한 리액트 컴포넌트 테스트

https://velog.io/@velopert/react-testing-library

TDD의 소개

TDD(Test Driven Development : 테스트 주도 개발)

• 테스트가 개발을 이끌어나가는 형태의 개발론
• 테스트 코드 작성, 후 구현
• 사이클을 반복적으로 돈다.
  • ->실패->성공->리팩터링-

실패

실패하는 테스트 케이스를 먼저 생성

성공

실패하는 테스트 케이스를 통과시키기 위한 통과 코드를 작성

리팩토링

중복 코드등의 코드 개선

테스트 케이스가 성공하는지 확인하기 위해 첫번째 절차인 실패로 돌아가서 테스트 케이스를 작성

TDD 장점

• 작은 단위로 테스트 케이스를 만들기 때문에 코드의 모듈화가 자연스럽다.
• 테스트 커버리지가 높아지면 리팩토링, 유지보수가 쉬워진다.
• 프로젝트 퀄리티가 좋아진다.
• 협업에 도움이된다.
• 버그를 줄일 수 있다.
• 요구사항 충족을 확인하기 쉽다.

원본

https://velog.io/@velopert/TDD%EC%9D%98-%EC%86%8C%EA%B0%9C

자바스크립트-테스팅의-기초

유닛테스트

작은단위로 기능을 잘게 조개서 잘 동작하는지 확인

기능 단위

통합테스트

전체적으로 동작이 잘되는지 확인

컴포넌트 상호작용

테스트 도구 종류는 다양하고 여러 목적에 따라 특출난 것들이 있으니 확인 후 선정하면 될 듯

아래는 테스트도구 10개를 소개하는 글이다.

http://www.itworld.co.kr/news/128974

원본 글에서는 설정이 간단하고 시작하기 편하다며 Jest를 사용했다.

jset와 @types/jest를 npm install한다.

-함수를 만들었으면 test함수도 만든다.

-test 키워드 대신 it 키워드를 쓴다.

-describe를 사용해서 여러 테스트 케이스를 묶는다.

테스트 코드 작성 시의 이점은 리팩토링 이후 코드가 잘 동작하는지 검증하기가 간편하다는 점이다.

테스팅 관련해서 벨로퍼트님의 글을 순서대로 읽으면 될 듯 하다.

원본

벨로퍼트와 함께하는 리액트 테스팅

https://velog.io/@velopert/react-testing

자바스크립트-테스팅의-기초

https://velog.io/@velopert/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EA%B8%B0%EC%B4%88

clean-code-javascript

변수

• 의미있고 발음이 쉬운 변수

• 이해가 필요한 값은 변수로 등록

  • 86400000->MILLISECONDS_IN_A_DAY 변수로 등록

• 의도를 나타내는 변수 사용

• 나만 알아볼 수 있는 작명하지말 것

  • 반복문의 n, l, k 등..

• 객체 키 값에 중복되는(필요없는) 네이밍 사용 금지

  • car = { carMake : '' };

• 매개변수 기본 값 등록

함수   

• 2개 이하의 인자 값

  • 많아 질 경우 객체로 매개변수 전달하여 명확하게

• 함수는 하나의 행동만

  • 매개변수를 조건 플래그로 사용하지 말 것

• 함수명만으로 행동을 알 수 있도록  

• 중복코드, 안쓰는 코드 주의

• object는 assign으로 기본 객체를 생성해 처리

• 사이드 이펙트 주의

  • 전역 변수 주의 수정이 필요할 경우 새로운 변수로 생성

  • 전역 함수 사용 금지

  • 객체 수정 시 새로운 객체로 만들어 리턴

• 함수형 프로그래밍 지향

• 조건문 캡슐화

• 부정 조건문 사용 지양

  조건문을 되도록 피하라

• 일관성있는 API

• 타입이 필요하면 타입스크립트

• 과도한 최적화 금지

객체, 자료구조

• getter, setter 사용

• private

• 프로토타입보단 클래스 사용

• 메소드 체이닝

  • return this

• 상속보다는 조합

  • 상속 시 같은 타입인지, 상속이 맞는지 체크

• 단일책임원칙

• 개방/폐쇄 원칙

• 리스코프 치환 원칙

• 인터페이스 분리 원칙

• 의존성 역전 원칙

• 테스트

• 동시성

  • callback 지양, promise

  • es2017/es8에서는 async와 await

• 에러처리, 단순히 log를 찍지 말고 처리를 해라(promise도 마찬가지)

• 포맷(일관된 컨벤션)

• 함수 호출자, 피호출자는 가깝게

  • 책 읽듯 흐름에 따라

주석

• 로직이 복잡한 곳만 사용

• 주석으로 버전관리하지말 것

• 주석으로 된 코드 삭제

• 코드 위치 설명하지 말 것

  • ===============액션 영역==============

원본 

https://github.com/qkraudghgh/clean-code-javascript-ko