Set husky, lint-staged, jest

[BKJang]

Set husky, lint-staged, jest

Added Libraries

• "@types/jest": "^24.0.25",
• "husky": "^4.0.3",
• "jest": "^24.9.0",
• "lint-staged": "^9.5.0",
• "ts-jest": "^24.3.0"

Code Summary

"scripts": {
   ...
   "precommit": "lint-staged"
},
"husky": {
   "hooks": {
      "pre-commit": "npm run precommit"
   }
},
"lint-staged": {
   "*.ts": [
      "npm run lint",
      "npm run test",
      "git add"
   ]
 },

[SeonHyungJo]

해당 npm script 관련하여 찾아보던중 chrome web.dev에서 사용하는 npm-run-all을 찾았습니다.

관련하여 해당 스크립트는 간단한 스크립트 작성으로 순차적으로 진행하는 방법과 병렬로 진행하는 방법을 지원하여 "npm run lint", "npm run test",의 경우 run-s lint test와 같이 작성을 하는 방법을 사용합니다.

스크립트 작성의 편의를 위해서 고려해보는 것도 좋아보입니다. @BKJang

[SeonHyungJo]

@BKJang
jest --coverage 관련 coverage 상세내역은 수집이 되지만 전체파일 내역에서 수집되지 않는 이유를 찾아본 결과

jestjs/jest#7734

해당 내용과 같은 이슈로 해결방안은

jestjs/jest#7734 (comment)

이와 같으며 결국 수집할 내역의 파일을 들을 glob pattern 방식으로 명시를 해주면 해결됩니다. 설정에 대한 자세한 내용은 https://jestjs.io/docs/en/configuration#collectcoveragefrom-array 에서 확인할 수 있습니다.

위의 내용을 적용하려면 collectCoverage option을 추가해주셔야합니다.

[SeonHyungJo]

CSS도 Lint를 적용할 수 있다는 것을 발견하여 나중에라도 추가하면 좋을 것 같아 링크를 추가합니다.

관련 글은 아래와 같습니다.

• https://velog.io/@leejh3224/Postcss-preset-env-Use-tomorrows-CSS-today#stylelint
• https://github.com/stylelint/stylelint

[BKJang]

해당 npm script 관련하여 찾아보던중 chrome web.dev에서 사용하는 npm-run-all을 찾았습니다.

관련하여 해당 스크립트는 간단한 스크립트 작성으로 순차적으로 진행하는 방법과 병렬로 진행하는 방법을 지원하여 "npm run lint", "npm run test",의 경우 run-s lint test와 같이 작성을 하는 방법을 사용합니다.

스크립트 작성의 편의를 위해서 고려해보는 것도 좋아보입니다. @BKJang

말씀해주신 npm run all라이브러리는 제가 서치해본 결과, 여러 개의 npm script를 묶어 처리하기 위해 사용하는 것 같습니다.(제 의견이 틀린거라면 말씀해주세요 😄)

하지만, 현재 PR 내용을 보시면 lint-staged를 통해 npm script를 묶어 처리하고 있는데 굳이 해당 라이브러리의 도입이 필요하지 잘 모르겠습니다.

둘 중 하나를 선택해서 사용하거나 차후 말씀하신 라이브러리의 필요성이 대두되면 도입하는 것도 나쁘지 않을 것 같습니다 :)

짝코딩 과정 중 얘기해보시는걸로 해요!

[SeonHyungJo]

추가적으로 발생한 jest --coverage와 webpack dev server compile 에러는 이슈로 처리하겠습니다.