Peep

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

비동기적으로 바뀌는 컴포넌트 UI 테스트

비동기적으로 바뀌는 컴포넌트 UI 테스트

Async Utilities 함수를 사용
wait 

• 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기
• timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능)
• 리액트 16.8 버전 버그있음

waitForElement

• 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..)
• 프로미스가 끝날때 선택한 엘리먼트 resolve

waitForDomChange

• 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지 대기
• 프로미스가 resolve 되면 mutationList를 통해 DOM의 변화 정보를 알 수 있음

waitForElementToBeRemoved

• 특정 엘리먼트가 화면에서 사라질때까지 대기 

REST API 호출 테스트방법

• axios 설치, JSONPlaceholder를 통해 가짜 API 사용할 주소로 API 호출
• 이때 실제 요청하지 않고 node_modules를 mocking하는 방법 혹은 axios-mock-adapter라이브러리 사용

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

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

비동기적으로 바뀌는 컴포넌트 UI 테스트

https://velog.io/@velopert/react-testing-library-%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9E%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8

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

Enzyme를 사용하여 리액트 컴포넌트 테스트

테스트 소개

가장 기본적인 방법은 내부 유틸 함수인 react-dom/test-utils 사용한다.

하지만 복잡하고 불편한 점이 있기 때문에 리액트 공식문서에서도 테스팅 라이브러리 사용을 권장한다.

react-testing-library를 권장하며 Enzyme를 대체하여 사용할 수 있다고 언급한다.

두 라이브러리는 서로 다른 철학을 가지고 있다.

Enzyme

• 컴포넌트 내부 기능 집중
• post나 state 확인
• 컴포넌트 내장 메서드를 직접 호출

react-testing-library

• 렌더링 결과에 집중
• 컴포넌트 인스턴스에 신경쓰지 않고 화면에 보여지는 것
• 이벤트 발생 시 화면의 변화에 대한 부분에 최적화
• 사용자 관점에서 테스팅하기 용이하다.

Enzyme

1. IDE의 지원을 제대로 받기위해 jest 설치

• CRA로 만든 프로젝트는 jest가 이미 설치되어 있으나 아닌 경우에는 @types/jest를 통해 설치

2. enzyme enzyme-adapter-react-16 라이브러리 설치 

• 스냅샷 테스팅은 enzyme-to-json 라이브러리 추가 설치

3. package.json에 jest 설정

• 필요하다면!

4. 테스트 코드 작성

테스트 목록

• 스냅샷 테스팅
• props 접근
• DOM 확인
• 클래스형 컴포넌트의 테스팅
• DOM 이벤트 시뮬레이트

리액트 테스트의 소개

https://velog.io/@velopert/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9D%98-%EC%86%8C%EA%B0%9C

Enzyme를 사용하여 리액트 컴포넌트 테스트

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

TDD의 소개

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

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

실패

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

성공

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

리팩토링

중복 코드등의 코드 개선

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

TDD 장점

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

원본

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