[ErrorHandling] Jest axios 에러

에러 사항

내 터미널에 나온 에러를 다시 만들어 내지 못해서
나와 같은 에러를 만난 사람의 터미널 사진을 가져왔다.

Jest 관련 인강 실습 도중 만난 에러인데
axios를 import 할 수 없다는 에러이다.

이유

인강과 내 코드의 차이

인강에서 제공해준 소스 코드에서 package.json을 열어본 결과,

인강에서 사용한 axios 버전은 0.21.4 이고
내가 사용한 axios 버전은 1.4.0 이다.

인강

내 코드

axios 버전과 변경 사항

axios 버전이 크게 다름을 알 수 있는데

0.x 버전에서는 CommonJS 방식이었는데
1.x 버전부터 ECMAScript 문법을 따르는 모듈로 변경되었다고 한다.

Jest 기본 구조

Jest는 nodejs 환경에서 동작하기 때문에 CommonJS 방식으로 모듈을 사용한다.

Jest에서 node_modules 폴더는 기본적으로 변경 대상에서 제외한다.

https://jestjs.io/docs/27.x/configuration#transformignorepatterns-arraystring

Jest는 바벨 같은 트랜스파일러를 통해
ECMAScript 모듈을 CommponJS 문법에 맞도록 변경 후 사용해야 한다.

결론

Jest는 nodejs 환경에서 동작하므로 CommonJS 방식으로 동작한다.

axios의 사용 방식이 CommonJS(require) 방식에서 ECMAScript(import) 모듈 방식로 변경 되었다.

Jest는 바벨 같은 트랜스파일러를 통해
ECMAScript 모듈을 CommponJS 문법에 맞도록 변경 후 사용해야 한다.

해결 방안

ECMAScript -> CommonJS

nodejs 는 CommonJS 방식을 사용한다.
1.x 버전의 axios는 ECMAScript 를 사용한다.

따라서 ECMAScript를 CommonJS 방식으로 쓸 수 있도록 트랜스파일링을 적용해야한다.

방식 1. package.json 파일 설정 추가 - 채택

"type": "module"

type 프로퍼티를 "module" 로 설정한다.

package.json 파일에 있는 설정으로,
이 설정이 있으면 nodejs는 해당 패키지의 .js 파일을 ECMAScript 모듈으로 취급한다.

또한 이 설정이 있는 경우에는, CommonJS 모듈을 사용하려면 파일 확장자를 .cjs로 지정해야 한다.

type의 기본값은 "commonJS" 이다.
"type": "commonjs" 가 설정되어 있고 ES 모듈을 사용하려면 .mjs 확장자를 사용해야 한다.

방식 2. jest.config.js 설정 파일 사용

바벨 변경 대상 지정

방식 3. babel.config.js(혹은 .babelrc) 설정 파일 사용

바벨 프리셋(preset) 지정

Jest에서 제외된 node_modules 폴더에서 axios 만 해제

package.json에서 설정한다.

방식 1. "axios" 모듈을 해석할 때 대신 "axios/dist/node/axios.cjs" 파일을 사용하도록 지정

package.json 에 아래 구문을 추가한다.

Jest가 "axios" 모듈을 해석할 때 대신
"axios/dist/node/axios.cjs" 파일을 사용하도록 지정 한다.

이는 axios 모듈의 특정 버전이 Jest 테스트 환경과 호환되지 않는 경우에 유용하다.
여기서는 axios 모듈의 CommonJS 버전을 직접 지정하여 Jest가 이 파일을 사용하도록 한다.

  "jest": {
    "moduleNameMapper": {
      "axios": "axios/dist/node/axios.cjs"
    }
  }

방식 2. "axios" 모듈을 변환(transform)하도록 지정

package.json 에 아래 구문을 추가한다.

/node_modules/ 디렉토리에 있는 파일을 변환하지 않지만,
이 설정으로 인해 axios 모듈은 예외로 두고 변환하게 된다.

이는 axios가 ES6 모듈을 사용하고 있으며,
Jest가 이를 이해하기 위해 변환이 필요한 경우에 유용합니다.

  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!axios)"
    ]
  }

결론 - package.json 수정

방식 1

{
...
 "type": "module", // 추가
...
"jest": { // 추가
  "transformIgnorePatterns": [
    "node_modules/(?!axios)"
  ]

방식 2

{
...
 "type": "module", // 추가
...
 "jest": { // 추가
  "moduleNameMapper": {
    "axios": "axios/dist/node/axios.cjs"
  }
}

추가 조사 - CommonJS 와 ECMAScript Modules

[JavaScript] CommonJS 와 ECMAScript Modules

참고

• https://junhyunny.github.io/react/jest/module-import-error-on-jest/
• https://jestjs.io/docs/27.x/configuration#transformignorepatterns-arraystring