[react/jest] jest에서 konva를 인식하지 못하는 경우 해결 방법.

요즘 웹에서 음악을 녹음하고, 편집하는 기능을 구현하고 있다.

그 과정에서 peaks.js를 사용하였는데, 여기에 사용되는 konva라는 라이브러리를 jest가 인식하지 못해서, 원래 잘 돌아가던 테스트케이스도 통과하지 못하는 상황이 발생했다. 이를 해결하는 방법을 기록해본다.

발생한 오류메세지는 아래와 같다.

 ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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/en/configuration.html

    Details:

    /Users/????/?????/?????/frontend/node_modules/konva/lib/index-node.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Konva } from './_FullInternals.js';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import Konva from 'konva';
        | ^
      2 | class CustomSegmentMarker {
      3 |   _options: any;
      4 |   _group: any;

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

이 오류를 해결하려면 package.json에서 jest부분에 다음과 같이 추가하면 된다

"jest"{
  "moduleNameMapper": {
      "^konva": "konva/konva"
    }
}