테스팅을 하는 이유?
간단하게 더 안정적인 어플리케이션을 위해서는 여러 방법으로 테스트를 해줘야 안정적인 어플리 케이션이 될 수 있기 때문에
테스팅으로 얻는 이점은?
- 디버깅 시간을 단축!
- 더욱 안정적인 어플리케이션
- 재설계 시간 단축 등...
React Testing Library란?
- 행위 주도 테스트
RTL은 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library위에 구축
DOM Testing Library란 Dom 노드를 테스트하기 위한 가벼운 솔루션
즉 리액트 컴포넌트를 테스팅 하는 가벼운 솔루션
RTL은 에어비엔비에서 만든 Enzyme을 대처하는 솔루션입니다. Enzyme이 React 개발자에게 React 구성 요소의 내부를 테스트할 수 있는 유틸리티를 제공하는 동안 RTL은 한 걸음 물러서서 "React 구송 요소를 테스트하여 React 구성 요소를 완전히 신뢰하는 방법"에 대한 고민. 구성 요소의 구현 세부 정보를 테스트하는 대시 RTL 개발자를 React 애플리케이션 사용자 입장에 둠
DOM 이란?
문서 객체 모델 은 XML, HTML 문서의 각 항복을 계층으로 표현 하여 생성, 변형 삭제할 수 있도록 돕는 인터페이스입니다.
- HTML이 브라우저의 렌더링 엔진에 의해 분석되고 분석이 모두 끝나고난 HTML파일이 DOM입니다.
- HTML은 화면에 보이는 모양과 구조를 문서로 만들어서 단순한 테스트로 구성되어 있으며 DOM은 HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있습니다.
- HTML 문서가 유효하지 않게 작성됐을 때는 브라우저가 올바르게 교정해주며, DOM은 자바스크립트에 의해 수정 될 수 있습니다. 하지만 HTML은 수정 하지 않습니다.
CRP(Critical Rendering Path)
브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있습니다.
웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정 입니다.
render
- DOM에 컴포넌트를 렌더링 하는 함수
- 인자로 렌더링할 React 컴포넌트가 들어감
- return은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴(Destructuring 문법으로 원하는 쿼리 함수만 얻어 올 수 있다.) <-> 소스 코드가 복잡해지면 screen 객체를 사용! 이유는? 사용해야 할 쿼리가 많아질수록 코드가 복잡해질 수 있음
쿼리 함수란?
쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법입니다. 여러 유형의 쿼리("get", "find", "query")가 있습니다. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부. 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 적절할 수 있다.
1. "getBy" 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 설명 오류를 발생시킴. 둘 이상의 요소가 예상 되는 영우 getAllBy
2. "findBy" 주어진 쿼리와 일치하는 요소가 발견되면 해결되는 Promise를 반환합니다. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 약속이 거부됩니다. 둘 이상의 요소를 찾아야 하는 경우 findAllBy 를 사용
3. "queryBy"쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환합니다. 이것은 존재하지 않는 요소를 어설션하는 데 유용합니다. 둘 이상의 일치 항목이 발결되면 오류가 발생. (확인된 경우 대신 queryAllBy 사용).
fireEvent
유저가 발생시키는 엑션(이벤트)에 대한 테스트를 해야하는 경우 사용합니다.
Jest?
FaceBook에 의해서 만들어진 테스팅 프레임 워크입니다. 최소한의 설정으로 동작하며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인해줍니다. 단위 테스트에 이용
describe vs test, it
describe여러 관련 테스트를 그룹화 하는 블록을 만듭니다.test, it개별 테스트 를 수행하는 곳.
expect, matcher
expect함수는 값을 테스트할 때마다 사용됩니다.matcher다른 방법으로 값을 테스트 하도록 "매처"를 사용합니다.
ESLint, Prettier 사용
테스팅할 때 matcher를 알맞게 쓰는지 확신이 들지 않을 때가 있으며, 코드의 형식이나 자바스크립트 문법 등을 올바르게 쓰지 못할 때가 있다.
1. ESLint
- 개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤수있게 도와주는 라이브러리
- 자바스크립트를 쓰는 가이드라인 제시, 문법에 오류가 나면 알려주는 역할 등등
- ESLint는 포맷터 역할도 하지만 주요 가능은 문법 오류를 잡는 것!!
npm i -D eslint-plugin-testing-library eslint-plugin-jest-dom.eslintrc.json 설정하기
{
"plugins": [
"testing-library",
"jest-dom"
],
"extends": [
"react-app",
"react-app/jest",
"plugin:testing-library/react",
"plugin:jest-dom/recommended"
]
}1. delete eslintConfig in package.json
- plugins: 플러그인 추가 할 때
- extends: 플러그인을 추한 한 후에 "규칙을 정해"줘야 사용가능 그래서 extends 항복에 사용하고자 하는 규칙을 설정합니다. vue, angular, react 중에 react를 위한 규칙 recommended는 추천이 되는걸 사용. 만약 "규칙을 변경"하고자 할 때는 rule 항목을 추가.
2. make .eslintrc.json플러그인?
eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해서 사용할 수 있습니다.
예를 들어서 react에 관련된 린트 설정을 위해서는 eslint-plugin-react를 사용! react hooks에 관련된 적용시켜주려면 eslint-plugin-react-hooks를 사용!!
2. Prettier
- 주로 코드 형식을 맞추는데 사용
- 에러 찾는것이 아닌 코드 포맷터 역할
테스트 주도 개발(TDD)
Test Driven Development란?
실제 코드를 작성하기 전에 테스트 코드를 먼저 작성합니다.
테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성합니다.
- 원하는 기능의 테스트 코드 작성
- 테스트 실행 fail
- 테스트 코드에 맞는 소스 코드 작성
- 테스트 실행 pass
- 리팩토링
TDD를 하면 좋은 점
1. TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅시간이 줄어 들고 실제 개발 시간도 줄어든다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높다.
query priorty
사용자가 어떻게 컴포넌트를 사용하는지에 따라서 사요해야 한다.
userEvent > fireEvent
userEvent는 fireEvent를 사용해서 만들어 졌습니다. userEvent의 내부 코드를 보면 fireEvent를 사용하면서 엘리먼트의 타입에 따라서 Label을 클릭했을 때, checkbox, raio 를 클릭했을 때 그 엘리먼트 타입에 맞는 더욱 적절한 반응을 보여줍니다.
예를 들어서 fireEvent로 버트을 클릭하면 fireEvent.click(button) 버튼이 focus되지 않는다. 하지만 userEvent로 클릭하면 focus되기 때문에 더 유저의 클릭하는 행위가 더 잘 표현 된다고 본다.
Mock Service Worker
브라우저에 서비스 워커를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지합니다. 그리고 그 요청을 실제 서버로 갈때 중간에 가로채서 MSW 클라이언트 라이브러리로 보냅니다. 그 후 등록된 핸들러 에서 요청을 처리한 후 모의 응답을 브라우저로 보냅니다.
npm i -D msw