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

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

 

유닛테스트

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

기능 단위

 

통합테스트

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

컴포넌트 상호작용

 

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

아래는 테스트도구 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

+ Recent posts