1. Jest vs Vitest

Jest

장점

• Next.js 생태계에서 많이 사용되고있음 + npm trends 압도적 1등
• SSR, API Routes, 서버 컴포넌트 등 Next.js 고유 기능 테스트에 적합(하다고 하는데 아직 잘 모름 ㅋ;;;)

단점

• Vite 기반 프로젝트에 비해 속도가 느릴 수 있다.

Vitest

장점

• Vite 기반 프로젝트에서 매우 빠름

단점

• Next.js와 궁합이 좋지않음(SSR 등 일부 기능 추가 설정 필요) (아직 잘 모름;ㅋ)

결론

플러그인, 관련 코드 및 자료 량 등을 생각해봤을 때 Jest가 좋을거같다라고 판단

2. test 코드 위치

기억 상 테스트 코드는 __test__ 같은 파일을 만들어서 아래 모아두었었는데 FSD 아키텍처에선 이질감이 느껴짐
그래서 폴더는 따로 안만들고 테스트파일과 컴포넌트 파일을 함께 놔두는 것으로 결정함

3. 각종 문제 해결

Jest Matcher 확장 에러

Next.js 공식문서에서 하는대로 하고나니 해당 에러가 표시됨
Matcher가 없다는데 어떡하나~하면서 뒤적뒤적했더니 Next.js with Jest Example을 들어가봄

어라? 여기엔 jest.setup.ts란 파일이있네? 그래서 초기에 설정해줘야 하는게 있나? 싶어서 해당 주소(jest-dom)에 접근해봤음.

jest를 jest-dom 라이브러리를 써서 확장시키면 custom matcher를 제공해준다 적혀있고, 이 이유 때문에 setup을 해서 확장시키고 시작하는구나!라는걸 알게되서 setup 파일 만드니 바로 해결이 되었음

Test 파일에 대한 Lint 규칙

막상 구현을 하고 나니 이런 의문이 들었음
'테스트 코드는 같은 린트 규칙을 공유하나? 안하자니 얘도 코드인데?'

해서 찾아보니 역시 eslint에 jest 플러그인이 있었고 이를 적용해줌

사실 이게 맞는건진 모르겠는데 안하는 것보단 낫지 않을까?
일단 해보고 나중에 이상하면 또 수정해야겠음