Testing Angular application using Jest - Jest encountered an unexpected token

Question

I am using Jest for testing my Angular application but am getting the following errors:

● 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)

Am also using https://nx.dev/angular.

This is my jest config:

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'],
};

My package.json looks like:

{
  "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 looks like:

{
  "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"]
}

This is the 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"]
}

This is 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"]
}

I have searched the web and debugged, but to no avail. I did what was suggested in this post but to no avail.

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

I don't know if I have to install babeljs also.

Answer 1

Vì một số nhà cung cấp xuất bản các nguồn của họ mà không cần chuyển ngữ, vì vậy bạn cần phải chuyển các gói này một lần nữa babel-jesttrong khi ts-jestsẽ chăm sóc tscác tệp. Ngoài ra, bạn nên chuyển đổi lại các gói này bằng cách chỉ định transformIgnorePatterns. Đây là cấu hình Jest đã thay đổi của bạn:

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})`],
};

Chỉ cần ghi nhớ, cài đặt babel, babel-jestvà cài sẵn của nó và tạo ra các cấu hình cho nó:

// 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

Tôi gặp phải vấn đề tương tự khi chuyển từ lodashsang lodash-es. Tôi đã làm những gì @ tmhao2005 đề xuất và được cài đặt @babel/core, @babel/preset-envvà babel-jestsau đó thêm vào một babel.config.jstrong thư mục gốc của NX Worspace tôi và cập nhật cơ sở jest.config.ts. vì vậy bạn có thể thử những cách sau.

Cài đặt phần phụ thuộc

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

Thêm babel.config.js

Trong thư mục gốc của Không gian làm việc Nx của bạn, hãy thêm a babel.config.jsvới phần sau được lấy từ tài liệu Jest

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

Cập nhật jest.config.ts

Cập nhật jest.config.ts cơ sở trong thư mục gốc của Không gian làm việc Nx của bạn thành một cái gì đó tương tự như thế này tùy thuộc vào nhu cầu cấu hình của bạn.

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)']
};

Cách tiếp cận này phù hợp với tôi khi sử dụng NX 10 lodash-esnhưng quãng đường của bạn có thể thay đổi theo các @ckeditorgói. Bạn sẽ phải thêm tất cả @ckeditorcác gói bạn muốn vàotransformIgnorePatterns

Một số liên kết hữu ích có thể có

NX phát hành 1091
NX phát hành 812