React Boot Camp 3일차

강의 자료

클릭!

강의 목표

• TDD가 무엇인지 안다.
• 다양한 상황에서 테스트를 어떻게 진행 할지
• 강의 후 리액트 테스트 어떻게 하는지 아는 것을 목표로

TDD의 기초

• 테스트를 직접하게 되면 복잡하고 번거롭기 때문에 테스트 자동화 라는 것을 한다.
• 자동화의 주 이점 원활한 협업, 자신감 있게 리팩토링
• 테스트 코드를 작성한다고 버그가 발생하지 않는건 아니다. 버그분석이 빠르고 버그에 대해 테스트케이스를 만들면 실수를 줄일 수 있다.

• 여러 테스팅 라이브러리 있다.

  • 조금씩 기능이 다르다.
  • 이 수업에선 JEST를 사용한다. 페이스북 개발팀이 만들었고 CRA에 기본적으로 포함 되어있다.

Javascript 테스트

• 만약 코드를 먼저 작성하고 테스를 작성하면 일부러 틀려서 잘 동작하는지 반드시 확인해야한다.
• 테스트 케이스의 값이 일치하는지 아닌지 matcher를 활용해 구분한다. 상황에 따라 적절한 matcher를 사용해주어야 한다.

TDD

• 짧게 요약하면 테스트 먼저 작성하고 해당 테스트를 통과시키기 위해 구현 하는것 이다.

• RED ⇒ GREEN ⇒ Blue or Refactor

  • 무엇을 개발 할지 계획, 실패하는 테스트 케이스를 작성
  • 계획한 일을 수행 작성한 테스트를 통과시키기
  • 기존 코드를 개선시킬 방향이 보이면 개선하자

Enzyme VS React-testing-library

• Enzyme은 인스턴스 자체에 접근해서 테스트 하는 경우가 많음
• rtl 작년 즈음 나와서 인기를 끌고 있다.
• rtl 과 Enzyme과 점유율을 비교하면 Enzyme이더 높다.

• 근데 react-testing-library는 좀더 사용자 관점으로 진해함 이게 어떠한의미냐면

  • Enzyme은 +1 찾아서 클릭했을때 무엇을 바꾸어야한다 테스트를 작성한다면
  • rtl의 경우는 인스턴스보다 화면에 무엇이 렌더링 되어있는지에 대해 더 관심이감 오직 UI에만 조금더 신경을 쓰게됨
  • rtl은 비동기적 요청에 따른 UI변경에 대한 테스트 또한 조금 더 적합하다.
  • rtl은 중점을 둔 부분은 우리가 어떠한 컴포넌트를 만들고 리팩토링한다고 가정 할때 컴포넌트의 내부기능은 바뀔수 있다. 이름이 바뀐다거나 사실상 사용자가 사용하기에 결과가 똑같은 결과라면 이전에 테스트코드가 똑같이 작동하게 하는 것을 철학으로 하고 있다.

Enzyme

• shallow VS mount

  • 서로 렌더링하는 깊이가 다르다
• 컴포넌트의 메서드만 확인하는것은 DOM이벤트를 발생시켜 확인하는 것이 아니기 때문에 부정확함

• 돔이벤트 트리거해서 테스트하는법을 알아보자.

  • 컴포넌트 랩퍼에서 DOM을 타겟팅 후 simulate('eventName') 형식으로 테스팅

• Hooks 컴포넌트의 경우 메서드가 노출되어 있지 않기 때문에 DOM기반으로 테스팅함

  • 주의할점은 훅스를 사용할 경우 shallow를 사용하면 안된다. useCallback이나 관련 함수들이 잘 동작하지 않는 버그가 발생한다.

React-testing-library

• enzyme을 쓸 땐 테스트코드를 작성하기 쓰기 싫었다.
• 하지만 rtl을 쓰고 좋은 경험을 했다.
• 쿼리를 이용해 돔을 타겟팅하고 돔을 테스팅하는게 중요하다.

Todo

• enzyme의 경우 버튼 클릭했을대 서브밋 이벤트가 발생안하던 문제가있었다 지금도 안되는진 모르겠다.
• tobeCalled 는 어떠한 함수가 호출되었나? 확인하는 matcher
• tobeCalledWith는 호출된함수가 어떠한 파라미터로 호출되었는지 확인하는 matcher
• 프로덕트 코드도 리팩토링 TDD를 하지만 test 코드 또한 자주사용되는 함수는 리팩토링 하면서 진행하면 좋다.

리덕스 / 비동기 작업의 테스트

• 비동기 적으로 컴포넌트가 바뀔때에는 어싱크유틸리티라는게 있다. 유틸리티에 4가지 함수가있다.

리덕스

• 컨테이너 컴포넌트는 엔자임의 경우 목 리덕스 라는 것도 있다.
• rtl은 UI중심이기 때문에 목 스토어를 사용하는 예시는 거의 없더라구요 하지만 사용하고 싶다면 해보아도 된다.

후기

• 원래 책도 쓰시고 강의를 해오시던 분이라 그런지 강의자료가 너무 훌륭했다.
• 강의를 따라하며 TDD 개발 환경 구성과 TDD 개발 흐름으로 진행해보았고 준비를 너무 잘해오셔서 그런지 생각보다 테스트 코드 짜는거 어렵지 않네 한 번 해봐야겠다는 생각이 들었다.