husky를 이용하여 push, commit 전 테스트 자동화
Husky를 이용하여 테스트 자동화 하는 이유
깃 action에서도 테스트 자동화를 할 수 있지만 월 2,000분만 무료로 제공하기 때문에 잦은 PR을 올리거나 테스트 개수가 많아졌을 때 비용이 들 수 있습니다. 그래서 push 혹은 commit 하기 전 로컬에서 테스트가 실패하거나 불필요한 코드가 같이 PR에 올라가는 지 확인하는 것이 좋다고 생각이 들었습니다.
GitHub Actions 요금 청구 정보 - GitHub Docs
계정에 포함된 스토리지 또는 시간(분)을 벗어나 GitHub Actions를 사용하면 추가 사용량에 대한 요금이 청구됩니다.
docs.github.com
설치
npm install husky --save-dev
npm install --save-dev lint-staged
husky
Modern native Git hooks made easy. Latest version: 8.0.3, last published: a year ago. Start using husky in your project by running `npm i husky`. There are 2929 other projects in the npm registry using husky.
www.npmjs.com
lint-staged
Lint files staged by git. Latest version: 15.1.0, last published: 20 days ago. Start using lint-staged in your project by running `npm i lint-staged`. There are 2055 other projects in the npm registry using lint-staged.
www.npmjs.com
적용 방법
package.json
lint-statged를 설정해 줍니다.
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}

그리고 postinstall을 추가해 줍니다.
"postinstall": "husky install .husky"

. husky/pre-commit
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
. husky/pre-push
. "$(dirname -- "$0")/_/husky.sh"
npm run test

에러 1
에러 코드
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with git config advice.ignoredHook false.

해결방법
chmod ug+x .husky/*
hook was ignored because it's not set as executable · Issue #1177 · typicode/husky
Context I get following error on Mac/Linux machines: hint: The '.husky/pre-commit' hook was ignored because it's not set as executable. hint: You can disable this warning with git config advice.ign...
github.com
Why is my Git pre-commit hook not executable by default?
If you see the accepted answer in: Aggregating and uglifying JavaScript in a Git pre-commit hook, you'll see that I had to do a chmod +x on my pre-commit hook to get it to work. Why is this not
stackoverflow.com
에러 2
원인
test에 jest --watch 설정이 되어있어서 허스키에서 테스트를 한 후 종료가 되지 않는 것이 원인이었습니다.

해결방법
test:ci라는 명령어에서는 --watch 옵션을 해제하고 pre-push에서 npm run test를 npm run test:ci로 변경해 주었습니다.

. husky/pre-push
. "$(dirname -- "$0")/_/husky.sh"
npm run test:ci
에러 3
원인
lint-staged 설정에서 eslint --fix라는 명령어가 올바르게 동작하지 않았는데 알고 보니 경로를 틀리게 설정했었다.
./ 을 없애고 나서야 제대로 동작했다.
"lint-staged": {
"./*.{js,jsx,ts,tsx}": [
"npx eslint --fix .",
"npx prettier --write ."
]
}

해결방법
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}

push일 때 테스트를 하는 사진

commit 할 때 eslint --fix와 prettier write를 하는 사진

참고자료
husky 설치, git commit/push 전 lint 오류 검사 자동화 by inyeong-kang · Pull Request #150 · woowacourse-teams/2023-vo
🔥 연관 이슈 close: #92 📝 작업 요약 husky 설치 vscode 터미널에서 git commit, push 전 lint 검사 및 test 수행 🔎 작업 상세 설명 husky, lint-staged 이렇게 2개 패키지 설치 package.json의 scripts에 prepare 라는 명
github.com
[CI/CD] Husky, GitHub Actions 로 팀 프로젝트 코드를 지속적으로 통합/배포하기 (ESLint, Prettier, Jest, gh-pa
리액트 팀 프로젝트의 린팅, 코드 포맷팅, 테스팅과 자동화에 대해 다룹니다.
velog.io
husky: git hook을 통한 테스트 및 린트 자동화
husky는 깃 훅에 따라 원하는 동작을 하게 도와주는 패키지입니다. git add나 commit, push가 시행되기 전이나 후에 원하는 스크립트를 실행시켜주죠. 오늘은 husky를 사용하는 방법에 대해 알아보겠습
blog.pumpkin-raccoon.com