Jest를 사용하여 Angular 애플리케이션 테스트-Jest에서 예기치 않은 토큰이 발생했습니다.

Question

Angular 애플리케이션을 테스트하기 위해 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:
     • 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:

    /home/cxo/Projects/git/sparta/clients/vaph/node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js:12
    import { throttle, cloneDeepWith, isElement } from 'lodash-es';
           ^

    SyntaxError: Unexpected token {

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1258:14)
      at ../../../node_modules/@ckeditor/ckeditor5-angular/bundles/ckeditor-ckeditor5-angular.umd.js:2:85
      at Object.<anonymous> (../../../node_modules/@ckeditor/ckeditor5-angular/bundles/ckeditor-ckeditor5-angular.umd.js:5:2)

또한 사용하고 있습니다 https://nx.dev/angular.

이것은 내 농담 구성입니다.

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
};

내 package.json은 다음과 같습니다.

{
  "name": "App-Name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "ng serve",

   // SEVERAL ENTRIES ARE OMITTED FOR CLARITY  
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.12",
    "@angular/cdk": "~9.2.4",
    "@angular/common": "^9.1.12",
    "@angular/compiler": "^9.1.12",
    "@angular/core": "^9.1.12",
    "@angular/forms": "^9.1.12",
    "@angular/localize": "~9.1.12",
    "@angular/material": "~9.2.4",
    "@angular/material-moment-adapter": "^9.2.4",
    "@angular/platform-browser": "^9.1.12",
    "@angular/platform-browser-dynamic": "^9.1.12",
    "@angular/router": "^9.1.12",
    "@angular/service-worker": "~9.1.12",
    "@auth0/angular-jwt": "^4.1.2",
    "@babel/polyfill": "^7.10.4",
    "@ckeditor/ckeditor5-angular": "^1.2.3",
    "@ckeditor/ckeditor5-build-balloon": "^19.0.0",
    "@ckeditor/ckeditor5-build-balloon-block": "^19.0.0",
    "@ckeditor/ckeditor5-build-classic": "^19.0.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^19.0.0",
    "@ckeditor/ckeditor5-build-inline": "^19.0.0",
    "@nrwl/angular": "9.5.1",
    "angular-build-info": "^1.0.7",
    "angular-notifier": "^6.0.1",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.2",
    "ng2-file-upload": "^1.4.0",

    // SEVERAL ENTRIES ARE OMITTED FOR CLARITY  

    "secure-ls": "^1.2.6",
    "zone.js": "^0.10.2"
  },
 "devDependencies": {
     "@angular-devkit/build-angular": "^0.901.11",
     "@angular/cli": "^9.1.11",
     "@angular/compiler-cli": "^9.1.12",
     "@angular/language-service": "^9.1.12",
     "@compodoc/compodoc": "^1.1.11",
     "@ngneat/spectator": "^5.12.0",
     "@nrwl/cypress": "9.5.1",
     "@nrwl/jest": "9.5.1",
     "@nrwl/workspace": "9.5.1",
     "@types/crypto-js": "^3.1.47",
     "@types/jest": "25.1.4",
     "@types/node": "~12.12.50",
     "dotenv": "6.2.0",
     "eslint": "6.8.0",
     "jest": "25.2.3",
     "jest-preset-angular": "8.1.2",
     "ng-mocks": "^10.1.1",
     "ng-openapi-gen": "^0.12.1",
     "ts-jest": "25.2.1",
     "ts-node": "~7.0.0",
     "tslint": "~6.0.0",
     "typescript": "~3.8.3"
}
}

tsconfig.json은 다음과 같습니다.

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      // SEVERAL LINES OMITTED FOR CLARITY
    }
  },
  "exclude": ["node_modules", "tmp"]
  "compilerOptions": {
    "types": ["node", "jest"]
  },
  "include": ["**/*.ts"]
}

이것은 tsconfig.lib.json입니다.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
}

이것은 tsconfig.spec.json입니다.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

웹을 검색하고 디버깅했지만 아무 소용이 없습니다. 나는이 포스트 에서 제안한 것을 했지만 아무 소용이 없었다.

오류 메시지에는 기본적으로 Jest가 Babel 구성을 발견하면이를 사용하여 "node_modules"를 무시하고 파일을 변환합니다.

바벨 즈도 설치해야하는지 모르겠어요.

Answer 1

일부 공급 업체는 소스를 트랜스 파일하지 않고 게시하므로 파일 을 처리 babel-jest하는 동안 이러한 패키지를 다시 트랜스 파일 ts-jest해야 ts합니다. 또한를 지정하여 이러한 패키지를 다시 변환해야합니다 transformIgnorePatterns. 변경된 Jest 구성은 다음과 같습니다.

const esModules = ['@ckeditor', 'lodash-es'].join('|'); // you can put more if there is others

module.exports = {
  transform: {
    '^.+\\.(ts|html)$': 'ts-jest', '^.+\\.js$': 'babel-jest',
  },
  // ...
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
};

명심하고 babel, babel-jest및 사전 설정을 설치 하고 구성을 만드십시오.

// Install
npm i -D @babel/core @babel/preset-env babel-jest 

// babel.config.js
module.exports = function(api) {
  api.cache(true);

  const presets = ['@babel/preset-env'];
  const plugins = [];

  return {
    presets,
    plugins,
  };
};

Answer 2

에서 lodash으로 전환 할 때 동일한 문제가 발생 했습니다 lodash-es. 나는 tmhao2005 @ 제안 및 설치 무엇을했다 @babel/core, @babel/preset-env그리고 babel-jest다음을 추가 babel.config.js내 Nx를 Worspace의 루트에베이스를 업데이트 jest.config.ts. 그래서 당신은 다음을 시도 할 수 있습니다.

종속성 설치

yarn add -D @babel/core @babel/preset-env babel-jest
npm I -D @babel/core @babel/preset-env babel-jest

babel.config.js 추가

Nx Workspace의 루트 babel.config.js에서 Jest 문서 에서 가져온 다음을 추가하십시오.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
};

jest.config.ts 업데이트

구성 요구 사항에 따라 Nx 작업 영역의 루트에있는 기본 jest.config.ts를 다음과 같이 업데이트합니다.

module.exports = {
    testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
    transform: {
        '^.+\\.(ts|html)$': 'ts-jest', '^.+\\.js$': 'babel-jest'
    },
    resolver: '@nrwl/jest/plugins/resolver',
    moduleFileExtensions: ['ts', 'js', 'html'],
    coverageReporters: ['html', 'json'],
    transformIgnorePatterns: ['/node_modules/(?!lodash-es)']
};

이 접근 방식은 NX 10을 사용하여 lodash-es 이지만 마일리지는 @ckeditor패키지에 따라 다를 수 있습니다 . @ckeditor원하는 모든 패키지 를 추가해야 합니다.transformIgnorePatterns

몇 가지 유용한 링크

NX 문제 1091
NX 문제 812