[Challenge / day-30] 컴포넌트 만들기 - 그룹생성 컴포넌트

오늘의 공부범위 : 51강 내용(Part4. ch3. 1강)

 

오늘은 드디어 제대로 컴포넌트를 만드는 시간이다. 모든 컴포넌트를 테스트 환경부터 세팅하고 시작한다. 레츠고!!

목차

1. 컴포넌트 UI테스트 환경 세팅

가장 먼저 렌딩페이지에 해당하는 Create Group 페이지의 작동여부를 검사하는 파일을 만들기 위해서 CreateGroup.spec.jsx를 생성하고, Jest를 이용해서 UI component가 원하는 기능대로 동작하는지 검사하는 코드를 짠다.

위와 같이 세팅을 해주고, describe 안에 test를 각각 나누어서 진행한다. 가장 먼저, 컴포넌트가 제대로 렌더링 되는지 테스트하는 코드를 세팅한다. input창과 save button 두 가지가 제대로 렌더링 되는지 테스트해주고 싶어 코드를 작성하는데, screen. 까지 입력하면 원래 음... screen 객체 안에 속성들이 잔뜩 나와야하는데 안나온다... 분명 무언가 문제가 있는 것 같아서 다시 살펴보니 import를 제대로 안해주어서 그렇다.

import {render,screen} from '@testing-library/react';

이렇게 해주고 다시 하니 제대로 작동한다.

테스트 코드는 인풋 창에 대한 테스트이므로 인풋창을 placeholder를 통해 변수로 받아올 때, 제대로 받아와지는지 검사한다. 부트캠프 과제에서 많이 보던 테스트 코드라서 친숙한데 expect를 정말 많이 사용한다.

 

// todo: input component
const input = screen.getByPlaceholderText('2022 제주도 여행')
expect(input).not.toBeNull()
// todo: save button
const saveButton = screen.getByText('저장')
expect(saveButton).not.toBeNull()

이렇게 해주게 되면 근데 input과 saveButton을 test 마다 재사용을 해야하고 재사용성이 없다. 재사용을 하지않고 이렇게 하드코딩하는 개발자는 뭐다? 개발자 자격이 없다. 강사님이 renderComponent를 선언하는 함수 안에 인풋과 세이브버튼 그리고 에러메세지까지 선언해주고 이것을 리턴해서 변수에 저장했는데 테스트 케이스 맨 윗줄에 다음과 같이 구조분해할당으로 가져와서 쓰시는데 너무 깔끔하고 멋있었다.

 const { input, saveButton} = renderComponent()

그리고 테스트 케이스를 완성해서 테스트를 돌려봤는데...

 

강사님은 분명 Jest 오류에 부딪혔는데 나는 오류에는 딱히 안부딪히고 reference 오류만 났다... 이게 무슨일이지..? (다시 보니 나는 애당초 js로 만들었는데 강사님은 파일들을 전부 jsx로 만드셨다. 나도 바꾸어서 진행하겠다 다음 강의에서는..!!)

이거는 CreateGroup을 import 해오면 해결되려나..? 음 여전히 문제가 있는데... 생각해보니 CreateGroup을 제대로 만들지도 않아서 발생하는 오류다. placeholder가 있는 input element를 가져오는 건데 정작 placeholder가 있는 것은 고사하고 input 요소가 아예없다.

 

실패하는 테스트 케이스 만드는 것은 일단 성공했다. 강사님 화면에 Run | Debug 라고 테스트코드 위에 뜨는 것이 신기했는데 요녀석을 설치하면 된다고 추천해주셨다. 바로설치했다 ㅋㅋㅋ 앞으로 유용하게 사용해야지.

 

 

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact