CODESOOM: REACT -3

한 것

 : 컴퍼넌트 마다 테스트를 작성했다. fireEvent와 expect를 사용했다.

fireEvent.click(getByText('추가'));
expect(handleClickAddTask).toBeCalled();

예를 들어서 이런 코드가 있다고 치면 이 코드는 '추가' 버튼을 누르면 expect에서 결과 값을 불러들어온다는 의미이다.

이런 의미가 아니라면 댓글 달아주세요,,

 

배운 것

 : TDD cycle이라는 것을 배웠다. TDD cycle의 순서로는 RED - GREEN - REFACTORING 이렇게 세 단계가 있다. 우선, RED는 실패하는 테스트들을 확인 할 수 있다. 이때, 에러 메시지를 먼저 확인하는 것이 중요하다. GREEN은 통과, REFACTORING은 코드들을 올바르게 되도록 수정하면서 중복을 제거하는 단계이다. 

 

React Testing Library는 리액트에 있는 컴퍼넌트를 테스트하기 위한 render를 제공하는 라이브러리이다. npm i -D @testing-library/react, 이때 밑줄 친 부분은 matcher를 확장하고 DOM을 확장해준다. 이렇게 되면 개발할 때 일일히 화면을 띄우지 않아도 돼서 빠르게 개발을 할 수 있다.

 

getByText: text로 요소를 찾을 수 있다.

 

const handleClick = jest.fn();

: handleClick이 jest가 미리 준비한 function으로 들어간다.

 

Mocking을 clear하는 이유? mocking한 함수들이 다른 테스트에 영향을 주기 때문이다. 테스트 이전에 afterEach, 테스트 이후에 beforeEach를 사용할 수 있다.

 

describe - it : 설명한다. it의 컴포넌트를. describe에는 컴포넌트를 위해 필요한 것들을 셋팅하고 it에는 테스트할 컴포넌트가 들어간다. 

 

Page.test.jsx : 페이지 테스트에서는 페이지 컴포넌트 쓰는 법을 서술하게 된다. 

const{getByText}= render((
  <Page
  tasks={tasks}
  />
));

이렇게 Page에 tasks를 넣어주고 위에 const tasks=[];를 해주면 tasks를 써주겠다는 의미가 된다.

 

List.test.jsx :

const buttons = getAllByText('완료');   완료 버튼을 눌렀을 때
fireEvent.click(button[0]);    여러개의 버튼 중에 처음 것을 누른다는 의미
expect(handleClickDeleteTask).toBeCalled();    완료를 눌렀을 때 handleDeleteTask가 되는 것

 

 

느낀 것

 : 이번주는 한 것보다 배운 것이 훨씬 많았다. 이번 과제도 도저히 완성 시킬 수가 없어서 과제 풀이 영상과 리뷰어님의 도움을 받아 완성 시켰다. 수업 영상이나 과제 풀이 영상을 볼 때는 이해가 되는데 혼자서 시도해보려고 하면 기억이 하나도 나지 않아서 못하겠다... 뒤돌면 바로 다 까먹는다.. 어떤 것부터 시작해야되는지가 제일 어려운 것 같다. 모르는 부분도 많아서 어디서부터 찾아보고 공부해야 하는지도 알수가 없어서 어렵다.. 

 

목표 

 : 모르는 부분은 바로바로 찾아보고 정리하고 그래도 모르겠으면 질문해서 완전히 이해하기