문제상황

---

NestJS Test를 진행하는데, 내부적으로 es6 문법이 있을때 관련 오류가 발생했습니다.

상황을 재현하면 다음과 같습니다.

테스트 할 경로에 지금과 같이 ES6 문법의 자바스크립트 코드가 들어가고있습니다.

그리고 테스트하는 코드에서 해당 코드를 호출하면...

지금과 같이 에러가 발생합니다.

해결하기

---

에러를 읽어보면, Jest가 파일 구문 분석에 실패했다고 나옵니다. 그리고 해당 에러가 나온 이유는 비표준 JavaScript 구문을 사용하거나 Jest가 이러한 구문을 지원하도록 구성되지 않은 경우라고 하네요. 🥹

비표준 JavaScript 문법이 아닌 ES6 문법이므로, Jest가 이러한 구문을 지원하지 않기 때문에 에러가 발생했겠네요.

Jest는 테스트를 진행하기 위해 만들어진 코드를 어떻게 컴파일을 할까요?
Jest Docs 에서 잘 설명해줍니다.

transform 속성을 통해서 Jest가 테스트 파일을 실행하기 전에 변환기(transformer)를 적용할 파일을 정의하는데 사용됩니다. 변환기는 예를 들어 TypeScript 파일을 JavaScript로 변환하거나, Babel을 사용해 ES6 코드를 ES5로 변환하는 작업 등을 수행한다고 하네요.

"transform": {
  "^.+\\.(t|j)s$": "ts-jest"
},

위 코드에서 "^.+\.(t|j)s$"는 정규표현식으로, 테스트 파일의 확장자가 .ts 또는 .js인 파일에 대해 ts-jest 변환기를 적용하도록 설정하는 것입니다. ts-jest는 TypeScript 코드를 컴파일하여 JavaScript로 변환해주는 역할을 합니다.

해당 설정을 통해서 Jest가 TypeScript 코드를 이해하고, ts-jest 변환기를 이용해서 테스트 파일을 JavaScript 코드로 변환하여 Jest가 실행될 수 있게 합니다.

🤔 그러면 어떻게 문제를 해결할 수 있을까요?

ts-jest 변환기는 tsconfig 파일을 통해서 대상을 정하게 됩니다. 그렇기 때문에 tsconfig 설정 중, "allowJS": true 를 추가해서 JS 파일도 컴파일을 하겠다고 명시하면 문제를 해결할 수 있습니다.

끝! 이라고 하면 뭔가 찜찜하니, 조금 더 살펴보겠습니다.

깊게 살펴보기

---

하다보니 궁금증이 몇가지 생겼고 이를 해결한 과정을 담고 있습니다.

왜 테스트시에는 오류가 발생하는데, 빌드시에는 오류가 발생하지 않을까?

사실 내용에는 안나왔지만, 테스트코드를 작성하기 전에 이미 빌드를 해서 프로젝트를 실행시켜봤습니다.

문제없이 동작했었는데 테스트 과정에서는 오류가 발생해서, 빌드와 테스트 환경에 대해서 그림으로 간략하게 표현해보았습니다.

빌드

제가 빌드를 진행하는 과정을 간단하게 표현해보았습니다. 프로젝트에는 ts, js 파일이 둘 다 있고, 이를 webpack을 이용해서 하나의 js파일로 관리되는 과정을 순서대로 작성해보았습니다.

1. 먼저 ts 파일은 tsc를 통해서 미리 지정한 js로 트랜스파일됩니다.
2. js 파일들은 babel을 통해서 es5 파일로 변환되고, webpack을 이용해 하나의 js파일로 합쳐집니다.

다음은 테스트 환경에 대해서 그림으로 표현해보겠습니다.

테스트

환경은 전과 동일합니다.

1. ts 파일이 ts-jest를 통해서 es5로 변환됩니다.
2. 그리고 곧바로 테스트를 진행하려고 하는데, es6 문법을 읽지 못해 오류가 발생합니다.

이때 "allowJS": true로 설정하면, js파일도 ts-jest가 es5로 변환하므로, 문제가 발생하지 않습니다.

ES6 문법이 있어도 되는가?

사실, 해당 오류가 발생하는 이유는 tsconfig에서 고려하지 않은 경우가 발생했기 때문(JS파일이 작성되었기 때문)이라고 할 수 있습니다.

NestJS는 일반적으로 JS코드 사용을 권장하지 않습니다. 하지만 TS로 작성되지 않은 외부 라이브러리를 사용하거나 하는 경우나, JS->TS로 변환하는 도중일 때, 또는 기존 변환에서 JS로 사용하게 더 장점이 클때는 JS코드를 사용하기도 합니다.

하지만 일반적으로 권장되지 않는 경우이므로, allowJS를 무조건 true로 설정하는 것은 지양해야 합니다.