2021.12.13(월) 초안작성
2022.01.04(화) 수정1
npx jest -> 통과하는지 확인하기
eslint 문제뜨는거 해결 -> env: {jest: true,},
npx jest --watchAll -> 이 프로젝트에 있는 텍스트 파일을 모두 감시.
리액트 Testing
테스팅 개요
Jest, React Testing Library 등을 사용할 수 있다.
Why - 테스트코드를 쓰는 이유?
-
test를 실행해놓으면 브라우저를 띄우지 않아도, 어떤일이 일어나는지 알 수 있어서 굉장히 빠르게 개발을 할 수 있다!
-
앱 검증, 테스트 먼저 작성해서, 믿을 수 있는 컴포넌트를 만든다.
-
컴포넌트를 어떻게 써야하는지 알 수 있는 100% 신뢰가능한 프로그래밍 전에 묘사해놓는 샘플.
1) Jest
-
JS 테스팅 프레임워크
-
Jest깔고, .test.js확장자로 파일만들면, 테스트 실행됨
(.jsx컴포넌트에 대해선, .test.jsx 확장자) -
test(' a ', b )
a: 테스트의 이름
b: 테스트한 함수 -> 내용으로 assertion 사용
2) Assertion(단정문)
-
기대하는 값(expect)
-
실제 값(actual)
-> 위 둘이 일치하는지 확인하는데 사용
- console.assert
-> 기대하는 값이 아닌경우 콘솔창에 출력
3) Signature
-
메서드, 펑션에 대한 구별할 수 있는 특징
-
name이름(anything) + parameters매개변수(x, y) + return반환값(result)
4) TDD cycle
-
Testing Driven Development, 테스트 주도개발
-
Red: 테스트 코드 작성
-
Green: 본 코드 작성해서 통과시킴
-
Refactoring: 기능은 그대로인데 설계를 개선하는 행위
method
-
탑다운 - 상위컴포넌트 먼저 만들기
: 내가 어떻게 쓸지 명확하게 정의, But 한 번에 코드를 많이 작성하면 기능에 압도당할 수 있다. -
바텀업 - 하위컴포넌트 먼저 만들기
: 컴포넌트 먼저 만들어보면 좀 더 간단하게 시작할 수 있다. (시작도 못할때 추천)
5) React Testing Library
-
React컴포넌트를 테스트하게 하는 라이브러리
-
fireEvent: DOM이벤트를 편리하게 발생시켜주는 메서드
-
Mocking: jest.fn()을 사용해, 의존관계를 끊고 독립적으로 테스트
-
render()를 쓰기위해 사용...
