1-1. 테스트란?

1. 테스트를 하는 이유?

• 처음에 테스트 코드를 짜는게 시간이 오래 걸린다고 생각 할 수 있지만, 나중에는 결국 개발 하는 시간이 훨씬 단축된다.
• 디버깅 시간을 단축한다.
  • 지금 에러가 DB문제인지 UI문제인지 Server문제인지 테스트 코드를 잘 짜면 쉽게 알 수 있다.
• 유지보수를 쉽게 할 수 있다.

2. React Testing Library

• React 컴포넌트를 테스트를 하기 위한 가벼운 솔루션 이다.
• Dom 노드를 테스트하기 위해서 "DOM Testing Library"을 이용하는데, "React Testing Library"는 "DOM Testing Library"위에 구축 되어 있다.
• CRA로 react 프로젝트를 만들면 설치가 자동으로 된다.
  • CRA을 이용하지 않을때 => npm install --save-dev @testing-library/react

• 2.1 Enzyme vs React Testing Library

  • Enzyme
    • 에어비앤비에서 만든 테스트 솔루션이다.
    • 구현 주도 테스트이다.
    • 어떠한 기능을 수행하는데 각 컴포넌트는 state와 props을 전달 하면서 구현이 되는데 이를 중점으로 둔 테스트이다.
  • React Testing Library
    • 사용자 입장에서 보는 행위 주도 테스트이다.
    • 하나의 컴포넌트의 행동에 좀더 중점을 주는 테스트이다.

3. DOM이 정확히 모야?

• HTML을 객체화 한것이다.
  • Document Object Model
• HTML은 수정 못하지만 DOM은 객체화가 되었기 때문에 JS을 이용하면 수정이 가능하다.
• 웹페이지 렌더링 과정
  
  • 렌더링이 일어나는 파트를 크게 두가지로 나누면 Construction파트와 Opearation파트가 있다. Construction 파트는 DOM으로 변환하고, Operatrion파트는 브라우저에 DOM을 그리는 파트가 있다.
  • Construction 파트에서 우선 url을 입력하여 서버에 request 요청을 보내면 서버는 response 응답 하는 단계를 거치고, 서버로부터 HTML을 받아서 로딩 과정을 거치게 되고, HTML, CSS 한줄 한줄 DOM 요소와, CSSOM(각 태그에 대해 CSS 속성들을 가지고 있는 트리)로 만드는 script 단계를 거치게 되고, 이를 이용하여 사용자에게 보여지는 render-tree를 만드는 rendering 단계를 거치게 된다.
  • Operation파트는 우선 layout파트에서 render-tree을 이용하여 브라우저에 어떤 사이즈 브라우저에 그릴지 레이아웃 계산을 하고, 같은 레이어끼리 묶어서 브라우저에 그릴 준비까지하는 paint단계를 거치고, 마지막으로 paint단계에서 준비한 레이어를 브라우저에 차례대로 내려 놓는 compostion단계를 거쳐서 유저에게 화면이 보여지게 된다.
• 우리는 여기서 HTML을 DOM으로 변환시킨 DOM Tree에 노드를 테스트 할 것이다.