React Testing - Static Analyze

Static Analysis Testing

• 실행 없이 코드가 일정 기준을 만족하는지 검증하는 절차

What to check

• 일정한 스타일과 포맷이 유지 되는가
• 흔할 실수와 버그 확인
• 코드의 복잡도를 제한한다.
• 타입 일관성을 유지한다.

Tools

• Typescript
• ESlint
• Prettier
• Husky
• Lint-staged

---

ESlint

npx eslint --init

• 자바스크립트 코드 패턴을 확인 및 리포팅 한다.
• 코트를 일관적이고 버그가 없게 함을 목표로 한다.
• 여러 개발자가 함께 일할때 중요하다.

jest

• yarn add -D eslint-plugin-jest-dom 으로 jest-dom eslint 플러그인 설치가 가능하다.
• eslintConfig의 extends 에 plugin:jest-dom/recommended 를 추가한다.

lint

• package.json 아래와 같은 script 를 추가한다.

"lint": "eslint --ignore-path .gitignore ."

• yarn lint 로 eslint 를 확인할수 있다.

ESlint was configured to run ... 에러 발생시

+ "include": ["vite.config.ts", ".eslintrc.cjs"]
tsconfig.json을 위처럼 수정한다.

---

Prettier

• 완성된 코드가 일관적인 스타일을 유지하도록 하는 코드 포매터

yarn add --dev --exact prettier

• script 에 하단 코드를 추가한다.

"format": "prettier --ignore-path .gitignore --write \"**/*.{ts,tsx,css,scss}\""

• .prettierrc.json 파일로 설정을 추가할수 있다.

// 예시
{
	"semi": false,
    "singleQuite": true
}

• ESlint 와 Prettier 를 같이 쓰기 위해선 ESlint 에 플러그인을 하나 추가해야 한다.

yarn add -D eslint-config-prettier

이후

"eslint-config-prettier" 를 package.json 의 eslintConfig > extends 에 추가한다.

---

husky

• 코드가 커밋되기 전에 자동으로 lint 되도록 할수 있다.
• 특정 상황에서 특정 스크립트를 작동하도록 할수 있다.

설치
npx husky-init && yarn

• .husky 디렉토리가 추가된다.
• pre-commit 에 하단의 코드를 추가한다.

yarn lint && yarn format

• 커밋 전에 lint 와 format을 실행하게 된다.
• lint 에러가 있으면 커밋이 되지 않고, 자동으로 prettier를 통해 formatting 된다.

---

lint-staged

• 현재는 husky 가 모든 코드에 eslint 와 prettier 를 통해 lint, formatting 을 하고 있다.
• lint-staged 를 통해 staged 된 파일만 lint 되게 할수 있다.

yarn add -D lint-staged

• package.json 에 아래 코드를 추가한다.
  • 어떤 파일에 eslint, 어떤 파일에 prettier 를 적용할지를 설정한다.

"lint-staged": {
	"*.{ts,tsx}": ["eslint"],
    "*.{ts,tsx,css,scss}": ["prettier"]
}

• 이후 pre-commit 을 아래와 같이 수정한다

npx lint-staged

• pre-push 훅에 테스트를 추가하기 위해선

npx husky add .husky/pre-push "npm test -- --watchAll=false"
를 통해 pre-push를 추가한다.

• push 전에 코드를 자동으로 테스트하게 된다!