jest SyntaxError: Cannot use import statement outside a module

문제경위

jest를 추가해 axios 호출 후 데이터요청하는 custom hook 테스트코드를 짜고 돌려보던중 fail이 떴다.
테스트 하던 import문에서 에러가 났길래 babel이 뭔가 transform을 잘못해주고 있는게 아닌가 싶어 구글링을 통해 config파일을 이것저것 설정해보았는데 해결이 되지 않았다. (제안해준 what you can do쪽도 도움이 되지 않았다)

에러 코드 전문

 Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/blair/dev/state-management/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 { useQuery } from "react-query";
      3 |
      4 | const API_URL = "https://api.github.com/users/";

      at Runtime.createScriptFromCode (node_modules/react-scripts/node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/quries/useUserQuery.ts:1:1)

자세히 보니 axios를 호출하는 import문만 계속 에러가 나는것 같아서 확인해보니 이런 이슈가 있었다고 한다

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

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

 

문제해결

쓸만해 보이는 해결방법은 2가지가 있었는데

1.moduleNameMapper 사용

 // jest.config.js
 moduleNameMapper: {
    '^axios$': require.resolve('axios'),
  },

2. package.json에서 test시 transform패턴을 조정해주기

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

혹은 아래와 같이 삽입 가능하다. 아래 방법으로 하면 npm test script를 원래대로 유지할 수 있다.

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

"test": "react-scripts test",

 

두가지 방법 모두 직접 해본뒤 test가 잘 작동하는것을 확인했다

---

버전 업 이후의 axios가 이러한 이유로 jest에서 에러를 일으키고 있는데 임시 해결방편을 찾을 수 있어 다행이었다. 근본적인 fix가 이루어져야하지않을까..

여담으로 코멘트 중 jest를 29.2x이상의 버전을 쓰면 따로 설정없이 잘된다는 user가 있었는데 내 경우엔 29.3x를 쓰고있음에도 작동하지 않았다.