[Learning React] 10장 - 리액트 테스트

10.1 ESLint

  - ESLint: 최신 JS 문법을 지원하는 코드 Linter

    - Linter/Hinter; JS 분석 도구

    - ESLint는 플러그인 추가 가능

    - ESLint가 자동으로 Node.js 전역 변수 포함 X => 오류 표시

    - eslint-plugin-react 플러그인; JS 외에 JSX와 리액트 문법 분석

  - ESLint 플러그인

    - eslint-plugin-react-hooks (필수)

      - 리액트 훅스와 관련된 규칙 추가

      - 훅스 사용 관련 버그 수정 시 도움됨

    - eslint-plugin-jsx-a11y

      - accessibility (접근성, a와 y 사이에 11글자)

      - 접근성; 웹사이트, 도구, 기술 등을 얼마나 쉽게 장애인분들이 사용할 수 있는지 의미

10.2 프리티어

  - 프리티어: 옵션 선택이 가능한 code formatter

    - 코드 구문 작성 규칙 정의

    - ESLint는 코드 품질과 관련된 관심사를 다루고, 프리티어는 코드 형식에 대해 다룸

  - 프로젝트에서 프리티어 설정하기

    - eslint-config-prettier

      - 프리티어와 충돌하는 모든 ESLint 규칙 끄기

    - eslint-plugin-prettier

      - 프리티어 규칙을 ESLint 규칙에 통합하기

  - VSCode에서 프리티어 사용하기

10.3 리액트 애플리케이션을 위한 타입 검사

  - PropTypes

    - 과거 코어 리액트 라이브러리의 일부분이었으나,

      최근 리액트 번들 크기를 줄이기 위해 별도 라이브러리로 분리됨

    - 개발 모드에서만 경고 발생

    - enum 타입 검사도 가능

      - enum 타입; 특정 필드나 프로퍼티에 넣을 수 있는 값을 특정 목록에 속한 값으로만 제한하는 타입

  - 플로우

    - 오픈소스 타입검사 라이브러리

    - 정적 타입 annotation을 사용해 오류 검사하는 도구

    - 점진적으로 타입검사 적용 가능

    - //@flow

      - 타입검사 하고 싶은 파일 맨 위에 추가

  - 타입스크립트

    - 타입스크립트: 리액트 애플리케이션 타입체크 도구

      - MS 개발

      - @types/ 로 시작하는 의존 관계는 라이브러리의 타입 정의를 의미

        - 해당 라이브러리가 제공하는 함수/메서드에 타입이 지정되기 때문에 라이브러리 타입 따로 지정할 필요 X

      - 프로퍼티 검증 등 편리함

      - TS의 type inference (타입 추론)을 사용하면 훅 값에 대한 타입검사 쉽게 할 수 있음

10.4 테스트 주도 개발

  - TDD; 모든 개발 과정을 테스트를 중심으로 진행해 나가는 습관

    - 테스트를 먼저 작성한다

      - 만들려는 대상이 무엇인지 선언하고 그 대상이 어떻게 작동해야 할지 테스트로 기술 (가장 중요한 단계)

    - 테스트를 실행하고 실패한다 (빨간색)

    - 테스트를 통과하기 위해 필요한 최소한의 코드를 작성한다 (녹색)

    - 코드와 테스트를 함께 리팩터링한다 (황금색)

  - TDD와 학습

    - 작은 분량을 대상으로 개발 진행

    - 코드를 짧게 작성하고 코드에 대한 테스트 작성하는 방식 반복

10.5 제스트 사용하기

  - create-react-app과 테스트

    - 제스트에서 제공하는 describe()를 이용하여 여러 테스트 grouping

10.6 리액트 컴포넌트 테스트하기

  - 리액트 컴포넌트 테스트

    - 리액트 컴포넌트; DOM을 만들고 갱신할 때 리액트가 따라야 하는 명령 제공

      - 컴포넌트를 렌더링하고 결과로 만들어지는 DOM을 검사하면 컴포넌트 테스트 가능

      - jest의 jsdom을 사용하면 Node.js에서 브라우저 환경 시뮬레이션 가능 (node.js로 테스트 진행)

  - 쿼리

    - 리액트 테스팅 라이브러리는 쿼리를 원하는 기준에 맞춰 매치시키는 기능 제공

  - 이벤트 테스트

    - fireEvent

  - 코드 커버리지 사용하기

    - 코드 커버리지: 테스트가 소스 코드 중 몇 줄을 실제로 테스트하는지 보고하는 과정

      - 테스트를 충분히 작성했는지 보여주는 지표

      - 테스트가 코드에 도달하는 범위를 측정할 때 유용한 도구

      - Jest의 Istanbul; 테스트를 분석해서 얼마나 많은 문장, 분기, 함수, 라인을 테스트가 검사했는지 표시

---

[Source Code] 러닝 리액트 Ch10. 리액트 테스트