최근 일을 하면서 테스트 코드의 비중을 점차 늘려나가고 있는데 이렇게 테스트 코드를 작성하면서 고민했던 것들을 정리해봅니다. 일반적인 테스팅 실수를 하지말자testing-library, jest-dom에 대한 eslint 공식 플러그인이 존재합니다.어느정도 테스트 코드를 짜보다보면 "당연한 거 아니야?"라는 생각이 들 수 있지만 처음 짤 때는 헷갈리기 마련이죠이런 상황에서 실수를 방지하는 역할을 해줍니다.https://github.com/testing-library/eslint-plugin-testing-library GitHub - testing-library/eslint-plugin-testing-library: ESLint plugin to follow best practices and antici..
제목은 간단했던인데요.. 사실 문제가 발생하고 난 뒤로 한 한달동안 해결을 못하다가 그냥 우아하게 해결하기는 포기하고 무식하게 해결해봤습니다. 문제 상황을 이해하는게 조금 어려웠는데 제 모노레포 프로젝트의 구조는 다음과 같습니다. root에 jest.config.js 와 jest.setup.js가 있는 구조인데 빌드 문제로 인해 각 하위 패키지들도 tsconfig.json을 가지고있습니다. 만약 하위 패키지에 tsconfig.json이 없다면 jest.setup.js를 적절히 탐색해서 타입에러없이 잘 수행하는데.. 그렇다고해서 tsconfig.json을 없애면 빌드 결과물이 터져나갑니다. 결국 jest.setup.js를 임포트하지못하는게 문제이니 조금 덜우아하더라도 import { render, rend..
🙃 대체왜요??이거.. 좀 케케묵은 이슈이기도 하고.. 스택오버플로우 보면 4년전에도 이런 일을 겪은 사람이 있고.. 공식문서에서도 안내사항을 만들어둘만큼 유명한 이슈인 것 같은데요... 처음 시도하는 사람은 약간 신고식처럼 맞고가야하는 것 같네요 저는 마침 처음 시도해본 덕에 호되게 맞고왔습니다. 동작 자체는 문제가 없기 때문에 타입스크립트 사용자 한정으로 문제가 됩니다만.. 요새 타입스크립트 안쓰는 사람이 어딨어요 하하😙 왜 문제인가요?자바스크립트 생태계의 테스트 프레임워크들이 여러개 존재한다는 것때문에 발생한다고 할 수 있습니다. jest, vitest, mocha 등등등... 테스트 프레임워크는 참 많은 종류가 나와있고 또 얘네들은 사용자 편의를 위해 하나 익혀두면 다른것도 뭐 그냥저냥 쓸 수 있..
테스트 커버리지 개인적으로 많이 궁금했던게 있습니다. 간혹 이력서에 테스트 커버리지를 몇퍼센트에서 몇퍼센트까지 올렸다. 라는 문구를 넣으시는 분들을 본적이 있는데요 테스트커버리지라는게 대체 뭔데? / 테스트커버리지를 어떻게 측정한건데? 라는 생각이 들었지만.. 따로 찾아보지는 않았었습니다. https://www.daleseo.com/jest-coverage/ Jest로 테스트 커버리지 수집하기 Engineering Blog by Dale Seo www.daleseo.com 근데 위 글을 참고해보니 테스트 커버리지를 측정하는 옵션을 jest에서 이미 제공해주고 있었더라구요 흥미로워서 바로 따라해봤는데 몇가지 문제가 있었습니다. 쓸데없는 파일까지 전부 측정되잖아!! module.exports = { coll..
🐸 테스트 코드가 왜 어려울까 그것은 테스트 코드를 써본적 없는 사람에겐 환경 설정이 지옥이기 때문이다. 진짜 한참 헤맸던 건데 테스트 코드를 입문하시는 분들이라면 비슷하게 헤매실 것 같습니다. 처음 jest를 설치하고 대충 a + b 테스트코드 짤때는 개쉬운데 컴포넌트 렌더링 해보는거에서 한번 지옥맛보고 비동기 테스트 하는거에서 두번 지옥맛을 본 뒤 테스트 코드를 손절하는.. 저도 그랬었는데요 심지어 리액트 쿼리 공식문서에서도 중요한 셋업을 전혀 가르쳐주질 않아서 한참 헤맸습니다. 테스트 진행 환경은 다음과 같습니다 next.js 13.5.3 / pages router jest ^29.7.0 msw ^1.3.2 @testing-library/jest-dom ^6.1.4 @testing-library/r..
ts환경 jest 안쓰는 import 에러 막기 우선 pathalias가 적용이 안되어서 에러가 나는 케이스는 이 링크로 이동해주세요 https://xionwcfm.tistory.com/375 이게 lint에러인지 jest가 기본적으로 안쓰는 import에 엄격한건지 고민이 많았는데 결론적으로는 타입스크립트의 tsconfig.json 파일의 설정 문제입니다. tsconfig.json "compilerOptions": { ... "noUnusedLocals": false, } 컴파일러 옵션에서 사용하지않는 locals에 대한 옵션을 false로 지정해주면 됩니다.
😎너무 좋은 블로그 https://velog.io/@thdrldud369/Vite-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-jest-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 Vite 프로젝트에 Jest 추가하기 Vite로 만들어진 React 프로젝트에 Jest를 추가하는 방법에 대한 설명 velog.io 전적으로 이 블로그를 참고하면서 포스트를 진행했습니다. https://github.com/XionWCFM/vite-mui GitHub - XionWCFM/vite-mui: vite-mui vite-mui. Contribute to XionWCFM/vite-mui development by creating an account on GitH..
https://im-developer.tistory.com/186 Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import) 프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import R im-developer.tistory.com 이 블로그에서 구원을 얻었습니다.. jest.config.ts export default { testEnvironment: 'jsdom', transform: { '^.+\\.tsx?$': 'ts-jest', }, moduleNameMapper: { '^.+\\.svg$': '..
