導入外部JS模塊進行Angular 7業力測試

Question

我正在測試一個具有導入JS模塊的Angular 7組件，例如：

component.ts

import * as classA from '../../classA'; // Imported JS modules
export class component implements OnInit {
  public a = new classA(10); // Instantiate
  ...
}

classA.js

class classA {
  constructor (a) {
    this.max = a;
    ...
}

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = classA;
}

component.spec.ts

import * as classA from '../../classA';

我要像在component.ts中一樣導入classA。

Component.ts正常運行，但是當我運行ng test時，出現錯誤： TypeError: classA is not a constructor

我試圖將其包含在karma.conf.js中，例如：

module.exports = function (config) {
  config.set({
    ...
    files: [
      "../app/classA.js"
    ]
  });
};

但是仍然出現相同的錯誤。 有誰知道如何在單元測試中導入JS模塊？

Answer 1

您使用es6模塊導入，但定義了commonjs模塊。 更好地使用es6模塊。

classA.js

class classA {
  constructor (a) {
     this.max = a;
    ...
}
export default classA

或使用要求：

 let classA = require('../../classA');

Answer 2

我找到了解決此測試錯誤的方法。 在Angular 7中，在component.ts中導入JS commonjs模塊的正確方法是

import classA from '../../classA';

同

"esModuleInterop": true,
"allowSyntheticDefaultImports": true

在tsconfig.json中