React 테스트 코드
1.1-1. 테스트란?
처음에 테스트 코드를 짜는게 시간이 오래 걸린다고 생각 할 수 있지만, 나중에는 결국 개발 하는 시간이 훨씬 단축된다.디버깅 시간을 단축한다.지금 에러가 DB문제인지 UI문제인지 Server문제인지 테스트 코드를 잘 짜면 쉽게 알 수 있다.유지보수를 쉽게 할 수 있다.
2.1-2. Jest
FaceBook에 의해 만들어진 테스팅 프레임 워크이다.테스트는 테스트를 실행후 결과 생성하는 "Test Runner"와 테스트 조건, 비교를 통한 테스트 로직인 "Assertion"가 있는데, Jest는 두가지의 기능을 모두 가지고 있다.Jest 특징자바스크립트 환경
3.1-3. React Testing Library API
create-react-app으로 react 프로젝트를 만들면, 기본적으로 test하는 라이브러리도 같이 설치가 된다.업로드중..screen이라는 객체에는 여러가지 객체가 있다.getByText()는 App 컴포넌트에 다음 텍스트가 있는지 확인 하는 것이다.toBeIn
4.2-1 TDD(실전)
1. TDD(Test Driven Development) 실제 코드를 작성하기전에 테스트 코드를 먼저 작성하는 것이다. 테스트 코드 작성 => 테스트 실행(실패) => 테스트 코드에 맞게 실제 코드 작성 => 테스트 실행(성공) 다음 같은 순서로 코딩을 하는 것
5.2-2 초기값 숫자 설정(실전)
1.구현 Counter숫자는 0부터 시작한다 테스트 코드 작성 App.test.js render를 통해 App컴포넌트를 불러온 후, 'getByTestId' 쿼리를 이용해서 해당 element를 찾도록 했다. 찾은 element는 기대한다. 결과값이 0이기를... 당
6.2-3 +버튼, -버튼 생성(실전)
'-버튼과 +버튼을 생성해야겟네'라고 생각하자우선 테스트 코드를 먼저 작성하자App.test.js테스트 실행/실패(npm test)대응 코드 작성App.js테스트 실행/성공!(npm test)
7.2-4 +, -버튼 기능 설정(실전)
이벤트가 일어날때 test용으로 사용된다.\+버튼을 누르면 숫자가 증가하고, -버튼을 누르면 숫자가 감소하는 기능을 만들어야지!테스트 코드 작성test코드 실행/실패(npm test)대응 코드 작성테스트 실행/성공!(npm test)
8.2-5 on/off 버튼 기능 설정(실전)
on/off 버튼의 배경색을 blue로 줘야지, off일때 -,+ 버튼을 못 누르게 해야지테스트 코드 작성테스트 실행/실패(npm test)대응 코드 작성테스트 실행/성공(npm test)