[vue2]jest 단위테스트 css 파일 문법 오류 에러 해결

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.


/오예프로젝트/node_modules/@오예/vue-cropper/dist/vue-cropper.umd.css:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){.vue-advanced-cropper {

Details:
SyntaxError: Unexpected token '.'


at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14) at Object.<anonymous> (node_modules/@오노/vue-cropper/dist/vue-cropper.umd.js:1:1)

보면, vue-cropper.umd.css에서 문법 오류가 발생한 것을 알 수 있다. jest 런타임 환경에서 걸린건데, css 해석을 못하는 것으로 보였다. jest 환경에서 이 코드를 해석하지 못하게 하는 방법을 찾아야 했다.

 

해결방법

참고: https://jestjs.io/docs/webpack

 

1. __mock__ /styleMock.js를 만든다.(폴더와 파일명은 뭐든 상관없다. 매핑할 수 만 있는 파일이면 된다.)

//styleMock.js
module.exports = {};

 

2. jest.config.js 매핑모듈 추가

module.exports = {
  // ...
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>$1",
    "\\umd.(css)$": "<rootDir>/__mocks__/styleMock.js", ⭐️⭐️⭐️⭐️⭐️⭐️⭐️추가
  },
};

 

 

이런 사례가 발생한다면, 똑같이 회피해야겠다.