[테스트 코드] 개념 정리

React Testing Library : React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축DOM Testing Library : Dom 노드(Node)를 테스트하기 위한 가벼운 솔루션Create React App으로 생

Document: 문서 / Object: 객체 / Model: 모델웹 페이지 빌드 과정(Critical Rendering Path CRP)웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정문서를 읽어들여서 그것들을 파싱하 고 어떤 내용을 페이지에

FaceBook에 의해서 만들어진 테스팅 프레임 워크최소한의 설정으로 동작하며 Test Case 를 만들어서 어플리케이션 코 드가잘 돌아가는지 확인단위 (Unit) 테스트를 위해서 이용파일명 지정파일 이름.test.js파일 이름.spec.jstests 폴더describ

render 함수render함수를 가져오는 방법은 두가지render 후, screen객체로 가져오기쿼리함수로 가져오기소스코드가 복잡해지면 하나씩 쿼리함수를 쓰기 애매하기 때문에 screen 추천페이지에 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법여러 유형의 쿼리

package.jon에서 eslint 관련 내용 삭제가장 상위에 .eslintrc.json 파일 제작삭제된 내용 붙여넣기 추가 ESLint 플러그인 설치eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러 그인을 통해 사용가능eslint-plugin-testing

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성TDD를 하면 좋은 점소스 코드에 안정감이 부여TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간 단축소스 코드 하나하나를 신중하게

getByRole('button, {name: /submit/i} : 가장 우선적으로 사용가장 마지막으로 써줘야할 형태img, area, input 등에서 사용

userEvent는 fireEvent를 사용해 제작되었음userEvent의 내부 코드 : fireEvent를 사용하면서 엘리먼트의 타입에 따라서 적절한 반응을 보여줌실제 사용하는 유저가 보기에 버튼을 클릭하는 행위가 더 잘 표현되기 때문에 UserEvent를 사용하는

백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서는 실제로 서버에 호출하는 end-to-end 테스트를 할 수 있지만, 서버에 요청을 보낼 때 그 요청을 가로채서 mock-service-worker라는 것으로 요청을 처리하고 모의 응답을 보낼 때 사용총 2가지 :