[axios, jest] Cannot use import statement outside a module 에러 해결

axios 버전: 1.1.3

jest 버전: ^29.2.1

 

새로운 프로젝트를 시작하면서 package.json의 모듈 버전들을 다 upgrade해보았다. 리액트 프로젝트에서 jest로 테스트 코드를 작성했는데, 실행을 하니 axios를 import하는 부분에서  Cannot use import statement outside a module라는 오류가 발생했다.

D:\--\node_modules\axios\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';

    SyntaxError: Cannot use import statement outside a module

    > 1 | import axios from 'axios'
        | ^
      2 | import { useNavigate } from 'react-router-dom'
      3 |
      4 | import styles from './home.module.scss'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/routes/Home/index.tsx:1:1)

 

---

 

https://github.com/axios/axios/issues/5101

Jest tests failed after upgrading axios to v1.1.2 · Issue #5101 · axios/axios

 

찾아보니 axios 깃허브에 이슈가 올라와있었다. 해당 글의 내용대로 package.json 부분을 수정해주니 오류가 발생하지 않았다.

package.json

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

transformIgnorePatterns를 사용하면 정규표현식과 매칭되는 파일은 transform되지 않는다고 한다.

아직은 임시적인 방법인 것 같지만 일단 파일 내용을 저렇게 수정해주니 테스트가 정상적으로 이루어졌다! :)

 

 

11월 11일 부로 axios 1.2.0-alpha.1버전이 나왔고, 해당 버전으로 업데이트하라는 답변이 있었으나 업데이트해도 똑같은 오류가 발생했다. 이는 1.x 버전의 axios가 이제 노드 환경에서 돌아가는 commonJS가 아닌 ES Module로 빌드되었다고 한다. 그런데 jest는 노드 환경에서 돌아가도록 구현되어 있기 때문에 이런 오류가 발생한다는 것 같다.

이전 버전인 0.27.2로 다시 설치해주니 정상적으로 실행이 되는 것을 확인할 수 있었다.

 

굳이 axios의 버전 업그레이드가 필요한 상황이 아니라면 기존 버전에서 테스트를 진행하는 것도 괜찮을 것 같다.