React Testing Library

RTL (React Testing Library)

React Testing Library는 React 구성요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.

DOM Testing Library란 DOM 노드(Node)를 테스트 하기 위한 매우 가벼운 솔루션이다.

 

CRA로 생성된 프로젝트는 즉시 React Testing Library를 지원하지만 그렇지 않은 경우 밑의 npm을 통해 추가해야한다.

npm install --save-dev @testing/library/react

 

RTL은 에어비엔비에서 만든 Enzyme을 대처하는 솔루션

Enzyme이 React 개발자에게 React 구성 요소의 내부를 테스트할 수 있는 유틸리티를 제공하는 동안 RTL은 한 걸음 물러서서 "React 구성요소를 테스트하여 REact 구성요소를 완전히 신뢰하는 방법"에 대해 질문한다. 구성 요소의 구현 세부 정보를 테스트하는 대신 RTL 개발자를 React 애플리케이션의 사용자 입장에 둔다.

 

Enzyme -> 구현 주도 테스트 (Implementation Driven Test)

React Testing Library -> 행위 주도 테스트 (Behavior Driven Test)

 

DOM 이란 ?

Document Object Model의 약자 

Document : 문서

Object : 객체

Model : 모델

DOM(문서 객체 모델)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형 삭제 할 수 있도록 돕는 인터페이스

 

HTML 요소들의 구조화된 표현

 

DOM은 HTML이 브라우저의 렌더링 엔진에 의해 분석되고 분석이 모두 끝나고 난 HTML 파일이 DOM이다.

 

HTML은 화면에 보이고자 하는 모양과 구조를 문서로 만들어서 단순 텍스트로 구성되어있으며 DOM은 HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다.

 

HTML 문서가 유효하지않게 작성됐을 때는 브라우저가 올바르게 교정해주며, DOM은 자바스크립트에 의해 수정될 수 있따. 하지만 HTML은 수정되지 않는다.

 

웹 페이지 빌드 과정 (Critical Rendering Path CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.

웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.

 

https://dimension85.com/glossary/critical-render-path

 

브라우저 렌더링은 HTML, CSS, JS 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정

1. HTML 파싱 후 DOM 트리 구축
2. CSS 파싱 후 CSSOM 트리 구축
3. JS 실행 ( HTML 파싱 중 JS 코드 있으면 파싱 중단)
   1. HTML 렌더링 중에 Javascript가 실행되면 렌더링이 멈추는 이유
   2. 렌더링엔진이 HTML 파싱을 하면서 한줄 한줄씩 DOM 트리를 생성하는데 Javscript를 만나게 되면 DOM 생성을 중단시키고 JS엔진에 제어권을 넘기는데, JS파싱이 끝난후 다시 제어권을 받게되면 중단된부분부터 다시 HTML 파싱을 재개하여 DOM 트리를 생성합니다.
4. DOM,CSSOM 트리 조합해서 렌더트리 구축
5. 뷰포인트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout)
6. 계산한 위치/크기 기반으로 화면에 그림 (Paint)