React/Typescript/Jest/uuid 사용 시 테스트 실패

문제상황

프로젝트를 진행하면서 처음으로 테스트를 진행하려고 RTL과 Jest에 대해서 알아보고 적용해보는 중이었다. 개발환경에서 유니크한 id를 생성하기위해서 uuid를 사용하려고 하였는데, uuid를 설치하고 적용해보니 Jest 테스트를 통과하지 못하게 되었다.

에러는 아래와 같았다.

 Test suite failed to run

    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/eunseung-gyun/workspace/swmaestro/CocoBob-FE/node_modules/uuid/dist/esm-browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      2 | import { useCallback } from 'react';
      3 | import { useDispatch } from 'react-redux';
    > 4 | import { v4 as uuidv4 } from 'uuid';
        | ^
      5 |
      6 | interface ToastProps {
      7 |   time?: number;

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
      at Object.<anonymous> (src/utils/hooks/useToastMessage.tsx:4:1)
      

원인 분석

오류를 한번 읽어보니, Jest가 지원하지 않는 문법 또는 non-standard JS 문법을 사용하면 발생할 수 있다고 한다.

해결 시도

What can you do 를 따라 시도해보았지만 해결되지 않았다.
몇 시간의 구글링을 통해서 겨우 찾은 해결책이 있었다.

바로 아래의 사이트를 통해 확인할 수 있다.

링크

위의 사이트에서 제시하는 해결책은 uuid의 버전을 바꾸어보라는 것이었다.

“@types/uuid”: “8.3.0", ->  “@types/uuid”: “8.0.1",
“uuid”: “8.3.1", ->  “uuid”: “8.1.0",

현재 나의 uuid 버전을 확인해 보니 버전이 비슷했다. 바로 uuid의 버전을 8.1.0으로 내리고 다시 시도해보니 놀랍게도 테스트를 통과할 수 있었다.

원인...?

아직 원인에 대해서는 정확히 파악하지는 못하였다. 그럼에도 이 글을 남기는 이유는 스택오버플로우나 깃허브 이슈에서도 해결책을 찾을 수 없었기에 한글로 기록을 남겨두기 위해서이다.
누군가 나와 같은 문제를 겪고있다면 도움이 되기를 바라본다..