[React] TDD로 간단한 어플리케이션 만들기

카운트

 

먼저 App을 간단하게 만들어주는데, 테스트를 진행할 부분은 그냥 data-testid라고 적어줘도 된다.

왜냐하면 쿼리 함수로 쓴 getByTestId가 data-testid를 찾는 역할을 하기 때문이다.

 

TestId가 "counter"인 엘리먼트의 텍스트가 0인지 확인하고 싶은데, 그냥 숫자 0이라고 테스트를 진행해 통과되지 않았다.

toBe(0) -> toHaveTextContent(0)으로 작성하면 테스트가 정상적으로 통과된다.

 

---

버튼 테스트

 

플러스 버튼과 마이너스 버튼을 만들었다.

각자 버튼이 "-" "+"라는 텍스트를 가지고 있는지 테스트를 진행했다.

 

컴포넌트를 쭉 훑어보면서 testid가 minus-button인 돔 요소를 찾아 buttonElement라는 변수에 그 부분을 할당했다.

그 돔 요소가 "-"라는 텍스트를 갖고 있는지 테스트를 진행했을 때 정상적으로 통과됨을 알 수 있다.

 

이번에는 각 버튼을 눌렀을 때 1씩 변화가 있는지 이벤트를 적용해 테스트를 진행하려고 한다.

먼저 플러스 버튼을 수정했는데, 플러스 버튼을 클릭하면 count가 1씩 누적합 된다.

 

유저가 발생 시키는 액션, 이벤트에 대해 테스트를 진행해야 하는 경우에는 FireEvent API를 사용한다.

 

유저가 buttonElement를 클릭했을 때, 그리고 그 때 counter의 변화를 우측 화면과 같이 테스트할 수 있다.

처음에는 0이라서 toHaveTextContent(1)이 정상적으로 실행된다.

 

스타일 속성도 테스트해보기 위해 on/off 버튼을 만들었다.

렌더링으로 on/off button이라는 testid를 가진 돔 요소를 확인하고, 그 돔 요소를 buttonElement에 할당한다. buttonElement가 스타일로 파란 배경색을 갖고 있는지 테스트 해볼 때, 좌측에서 style을 정말 그렇게 줬기 때문에 테스트는 당연히 통과된다.

 

on/off 버튼을 누르면 -, + 버튼이 disable 되게 하는 이벤트를 테스트 해보았다.

-, + 버튼에는 모두 disable을 걸어주었고, on/off 버튼에는 클릭 시 그 값을 반대로 뒤집어주는 이벤트를 추가했다.

 

우측에서 테스트 문구를 쓸 때는 아까와 같이 fireEvent를 적어 클릭 시에 + 버튼이 disable되는지 확인했다.

(정말 영어 읽는 것처럼 자연스럽게 읽어가면 되는 점이 신기하다.)