상황

---

Nestjs에서 Mocha, Chai, Sinon을 이용해서 단위 테스트를 진행하고 있었습니다.
이 때, Chai를 import해서 사용하려고 하니, 에러가 발생했습니다.

TypeError: Unknown file extension ".ts" for /Users/me/git/myProject/test/app.test.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21)

해당 Error가 발생했을 때, 설정 정보들은 다음과 같습니다.

package.json

...
  "devDependencies": {
    "@nestjs/cli": "^10.0.0",
    "@nestjs/schematics": "^10.0.0",
    "@nestjs/testing": "^10.0.0",
    "@types/chai": "^4.3.14",
    "@types/express": "^4.17.17",
    "@types/mocha": "^10.0.6",
    "@types/node": "^20.3.1",
    "@types/sinon": "^17.0.3",
    "@types/supertest": "^6.0.2",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
    "chai": "^5.1.0",
    "eslint": "^8.42.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.0.0",
    "mocha": "^10.3.0",
    "prettier": "^3.2.5",
    "sinon": "^17.0.1",
    "source-map-support": "^0.5.21",
    "supertest": "^6.3.4",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.1.3"
  }
...

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}

문제 해결

---

Github Issue, Stack overflow를 확인해보니, 이유는 쉽게 찾을 수 있었습니다.
발견한 유사 사례

해당 Issue를 보니, chai project는 v5부터 esm만을 지원한다고 합니다.

제 프로젝트는 commonjs로 module system이 구성되어 있어, 문제가 발생했던 것입니다.
chai v4 에서는 commonjs를 사용할 수 있으므로 version을 downgrade하면 문제를 해결할 수 있습니다.

Before package.json

...
  "devDependencies": {
    ...
    "chai": "^5.1.0",
	...
  }
...

After package.json

...
  "devDependencies": {
    ...
    "chai": "^4.3.10",
	...
  }
...

고찰

---

하지만 이와 관련해서 생각해볼 수 있는 문제들이 더 있습니다.

1. 왜 module system으로 commonjs가 아닌 esm을 사용하는지
2. 현재 프로젝트에서 모듈시스템을 commonjs를 esm으로 변경하려면 어떻게 해야하는지

해당 하는 내용에 대해서는 잘 정리된 블로그들이 있어서 링크를 걸어두도록 하겠습니다.

읽어주셔서 감사합니다. 🙇🏻‍♂️