FE/리뷰

[모던 리액트 딥다이브] 8장 ESLint와 테스트 라이브러리

따봉치치 2024. 9. 4. 19:50

 

 

정적 코드 분석
  • 코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사정에 수정하는 것
  • 자바스크립트 생태계에서 가장 많이 사용되는 정적 코드 분석 도구는 ESLint

 

 

ESLint의 코드 분석 방법
  1. 자바스크립트 코드를 문자열로 읽음
  2. 자바스크립트 코드를 분석할 수 있는 파서(espree)로 코드를 구조화함
  3. 2번에서 구조화한 트리를 AST라 하며, 이 구조화된 트리를 기준으로 각종 규칙과 대조함
  4. 규칙과 대조했을 때 이를 위반한 코드를 알리거나 수정함

 

ESLint 패키지
  • eslint-plugin : 특정 프레임워크나 도메인과 관련된 규칙을 모아놓은 패키지
    • eslint-plugin-import : import와 관련된 규칙 제공
    • eslint-plugin-react : 리액트 관련 규칙 제공
  • eslint-config : eslint-plugin을 한데 묶어서 완벽하게 한 세트로 제공하는 패키지\

 

테스트
  • 개발자가 만든 프로그램이 코딩을 한 의도대로 작동하는지 확인하는 일련의 작업
  • 버그를 사전에 방지할 수 있음
  • 잘못된 작동으로 인해 발생하는 비용을 줄일 수 있음
  • 코드를 수정하고, 수정한 내용에 대해서도 예외 케이스가 없고 의도한 대로 작동할 수 있는지 확인

 

 

React Testing Library
  • DOM Testing Library를 기반으로 만들어진 테스팅 라이브러리
  • 리액트를 기반으로 한 테스트를 수행하기 위해 만들어짐
  • 실제 리액트 컴포넌트를 렌더링하지 않고도 원하는 대로 렌더링되고 있는지 확인할 수 있음

 

DOM Testing Library
  • jsdom을 기반으로 함
    • jsdom : 순수하게 자바스크립트로 작성된 라이브러리
    • HTML이 없는 자바스크립트만 존재하는 환경

 

Node.js 제공 테스트 라이브러리
  • assert
  • should.js
  • expect.js
  • chai

 

Jest 메서드
  • beforeEach : 각 테스트를 수행하기 전 실행하는 함수
  • describe : 비슷한 속성을 가진 테스트를 하나의 그룹으로 묶는 역할
  • it : test와 동일함, 테스트 코드를 좀 더 사람이 읽기 쉽게 하기 위함
  • testId : 리액트 테스팅 라이브러리의 예약어
  • setup 함수 : 내부에서 컴포넌트 렌더링 후 반환
  • userEvent.type : 사용자가 타이핑하는 것을 흉내 내는 메서드
  • useEvent.click : 사용자가 마우스를 움직이고, 요소에 올리고, 마우스를 클릭하는 등의 모든 작동을 수행
  • jest.spyOn : 어떠한 특정 메서드를 오염시키지 않고 실행이 됐는지, 또 어떤 인수로 실행됐는지 등 실행과 관련된 정보만 얻고 싶을 때 사용
  • mockImplementation : 해당 메서드에 대한 모킹 구현을 도와줌

 

 

테스트를 작성하기 전 고려해야 할 점
  1. 테스트 커버리지가 놓다고 만능은 아니다
  2. 테스트 커버리지를 100%까지 끌어올릴 수 있는 상황은 생각보다 드믈다
  3. 테스트 코드를 작성하기 전 생각해봐야 할 최우선 과제는 애플리케이션에 가장 취약하거나 중요한 부분을 파악하는 것

 

테스트 종류
  • 유닛 테스트 : 각각의 코드나 컴포넌트가 독립적으로 분리된 환경에서 의도된 대로 정확히 작동하는지 검증하는 테스트
  • 통합 테스트 : 유닛 테스트를 통과한 여러 컴포넌트가 묶여서 하나의 기능으로 정상적으로 작동하는지 확인하는 테스트
  • 엔드 투 엔드 : 흔히 E2E 테스트라 하며, 실제 사용자처럼 작동하는 로봇을 활용해 애플리케이션의 전체적인 기능을 확인하는 테스트