Facts (사실, 객관)
-
이번주에는 리액트 Testing에 대하여 배울 수 있었다.
1/ Jest
- Jest 설치
- @types/jest
2/ Assertion
3/ Signature
4/ TDD
- 왜 TDD를 해야 하는가
- 2가지 간단한 룰
- How - Red Green Refactoring
5/ React testing library
- 설치
- @testing-library/jest-dom
- fireEvent
- Mocking
-
문서와 강의내용을 바탕으로 내용을 정리했다.
-
시작하는 월요일에는 문서를 한 번 읽고, 강의를 보고 바로 Input컴포넌트 테스트 코드 먼저 작성했지만 완성하지 못했다.
-
금요일에 과제를 완성했다.
-
토요일에 과제를 리팩터링했다.
Feelings (느낌, 주관)
-
처음에는 이번주 과제가 하나뿐이여서 마음에 여유(?)가 생겼는데, 막상 월요일에 강의를 듣고 Input컴포넌트 테스트를 진행하려고하니 감이 전혀 잡히질 않았다.
-
Input 컴포넌트 테스트에 대해서 트레이너분께서 도와주신 덕분에 그 틀을 베이스로 Page, List 컴포넌트 테스트도 완성할 수 있었다. 이 부분에서 빠르게 감을 잡을 수 있었던 것같다.
-
App 컴포넌트 테스트에서 막혔는데, 그 이유는 역시 컴포넌트의 기능을 재현해야한다는 집착때문에 useState hook을 테스트 코드에 구현하려고 많은 시간을 쏟았다.
-
잘못되면 콘솔창에서 브라우저가 알려주는 JS와는 다르게 테스트 코드는 정말 암흑속을 걷는 기분이었다.
-
하지만 트레이너분들의 도움으로 단서를 많이 얻을 수 있었고, 코드를 해설강의 전에 완성할 수 있어서 뿌듯했다. 리팩터링으로 코드가 정제되어가는 과정이 재밌고 결과물에 애정이 느껴졌다.
Findings (배운점)
- 처음에는 컴포넌트-테스트의 기능이 일치해야한다고 생각했지만, 사실 중요한건 컴포넌트별 테스트의 목적성이었다. 아래와 같은 부분을 배울 수 있었다.
테스트 코드를 작성할때 유의할 점
- 테스트는 컴포넌트의 가이드 라인이다.
- 실제 사용자가 앱을 사용하는 것처럼 테스트를 짜기
- 어떤걸 확인하고 싶고, 왜 테스트하는지에 집중
- 테스트 코드가 잘못되었을 때 얼마나 알아차리기 쉬운가
테스트 코드를 작성하는 방법
- ToDo: 통합 테스트 코드 작성
- Codecept JS: 실제 브라우저에서 사용자 테스트 실행가능
테스트 코드를 작성하는 순서
- 컴포넌트에서 사용법을 먼저 결정
- 테스트를 진행하면서 잘 작동하나 확인
Affirmation(자기 선언)
-
모르는 부분에 대해서는 최대한 많이 삽질하면 배워가는건 많겠지만, 일주일을 주기로 진행되는 과정이기 때문에 질문을 적극활용하자.
-
이론공부와 실습에 대해서 밸런스를 유지하자.
