Next.js typescript 환경 cypress + jest 설치 과정 중 만난 에러 핸들링

최근 합류한 프로젝트가 있는데 기존 코드 및 기획을 이해할 겸 테스트코드를 먼저 짜려고 했다.

이미 프로젝트에 cypress와 storybook이 있었는데 (사용하고 있지는 않았지만 ..?)

일단 testing-library를 써야겠다 싶어 jest를 설치했다.

 

Testing: Jest | Next.js

Next.js의 공식문서를 참고하여 진행했는데 계속해서 에러가 나는 것이다.

Property 'toBeInDocument' does not exist on type 'Assertion'

뭔가 없다며 any 타입을 찍어주고 있다.

테스트 초보인 나는 구글링을 해보았지만 돌아오는 결과는 'config 파일 좀 잘 써봐' 였다.

 

자세히 보니 expect가 이상하다.

오른쪽처럼 jest.Expect를 가져오지 않고 Chai.~가 보인다.

 

Chai는 Node-js에 어울리는(?) 오픈 소스 테스트 라이브러리이다.

Cypress는 플랫폼에 안정성과 친숙함을 제공하기 위해 Chai 기반으로 만들어졌다고 한다.

 

기존 jest 사용하던 코드에는 jest.Expect가 잡히고 있는데

에러 코드상에서는 Chai의 expect가 jest의 Expect 대신 잡히고 있는 것을 해결해야 하는 듯.

 

여기 답변을 참고해 해결할 수 있었다.

루트에서 jest를 바라보게 만들고 cypress는 cypress폴더 내에서 tsconfig를 설정해준다.

# cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"]
  },
  "include": ["../node_modules/cypress", "./**/*.ts"],
  "exclude": ["../node_modules"]
}

루트의 tsconfig.json을 extends하여 가져왔지만 하위 파일인 cypress/tsconfig.json이 덮여 적용된다.

cypress 폴더 내부에서는 cypress를 바라보도록 설정한다.

 

그럼 이제 jest로 잘 잡힌다.

 

하지만 또 문제가 있었으니

lint가 test파일마다 자꾸 devDependencies에 넣지 말라고 한다. 어째서...

# .eslintrc.json

  "rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.ts",
          "**/*.test.tsx",
          "cypress.config.ts"
        ]
      }
    ]
  }

구글링해보아도 린트에서 테스트 파일들을 빼주는 것 외에 별다른 방법이 없어 보인다. 

문제의 테스트 파일들을 적용범위에서 빼준다 🥹

 

드디어 빨간줄 없애기가 끝났다.

 

 

다음화 예고:

But ., 배포 시 빌드 에러를 만나게 되는데

 

---

 

 

Anyway

Test의 기반에 Chai 라는 것이 있는지 알게 되었고,

Typescript의 중요성을 다시 한 번 깨닫게 되었고,

웬만하면 건드리지 않던 설정 파일들을 읽고 이해하며 해결해보려는 시도를 했다!

'config 파일 좀 잘 써봐'가 결국 정답이긴 한 것이었다 😶‍🌫️