जेस्ट - जेस्ट का उपयोग कर कोणीय अनुप्रयोग का परीक्षण एक अप्रत्याशित टोकन का सामना करना पड़ा

Aug 17 2020

मैं अपने कोणीय अनुप्रयोग के परीक्षण के लिए जेस्ट का उपयोग कर रहा हूं, लेकिन निम्नलिखित त्रुटियां हो रही हैं:

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

मेरा पैकेज.जॉन जैसा दिखता है:

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

मैंने वेब खोजा है और डीबग किया है, लेकिन कोई फायदा नहीं हुआ। मैंने इस पोस्ट में जो सुझाया था वह किया लेकिन कोई फायदा नहीं हुआ।

त्रुटि संदेश में यह कहता है कि डिफ़ॉल्ट रूप से, यदि जेस्ट एक बैबल कॉन्फिगर देखता है, तो वह "नोड_मॉड्यूल्स" को अनदेखा करते हुए आपकी फ़ाइलों को बदलने के लिए उपयोग करेगा।

मुझे नहीं पता कि मुझे बबलज भी स्थापित करना है या नहीं।

जवाब

1 tmhao2005 Aug 17 2020 at 18:21

चूंकि कुछ विक्रेता अपने स्रोतों को ट्रांसप्लिंग किए बिना प्रकाशित करते हैं, इसलिए आपको इन पैकेजों को फिर से ट्रांसप्लांट करने की आवश्यकता है, babel-jestजबकि ts-jestदेखभाल की tsफाइलें ले जाएंगी । इसके अलावा, आपको इन पैकेजों को फिर से निर्दिष्ट करके बदलना चाहिए transformIgnorePatterns। यहाँ आपका परिवर्तित Jest config है:

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

Biffyn Aug 21 2020 at 23:46

मैं उसी मुद्दे में भाग गया जब से स्विच कर रहा 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 कार्यक्षेत्र की जड़ में जेस्ट डॉक्सbabel.config.js से लिए गए निम्न के साथ जोड़ें

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

जेस्ट - जेस्ट का उपयोग कर कोणीय अनुप्रयोग का परीक्षण एक अप्रत्याशित टोकन का सामना करना पड़ा

जवाब

निर्भरता स्थापित करें

Babel.config.js जोड़ें

Jest.config.ts अपडेट करें

कुछ संभव सहायक लिंक