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

 

 

정적 코드 분석

• 코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사정에 수정하는 것
• 자바스크립트 생태계에서 가장 많이 사용되는 정적 코드 분석 도구는 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 테스트라 하며, 실제 사용자처럼 작동하는 로봇을 활용해 애플리케이션의 전체적인 기능을 확인하는 테스트