Angular 导入 Karma 测试中使用的第 3 方 JS 文件的 6 种正确方法

Question

我有一个使用引用 Chart.js 的 primeng ChartsModule 的组件。我安装了 Chart.js 并将其导入到我的 angular.json 文件中。

"scripts": [
  "node_modules/chart.js/dist/Chart.bundle.min.js"
]

该应用程序全部正常运行并显示图表。然而，我的组件测试因错误而中断：ReferenceError: Chart is not defined

我看过一些文章建议将 Chart.js 导入我的组件测试，如下所示：

import { Chart } from 'chart.js';

这行不通。我的问题是将 Chart.js 等第 3 方 JS 库导入 Angular 6 Karma 测试

的正确方法是什么

编辑我的组件

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-my-chart',
  templateUrl: './my-chart.component.html',
  styleUrls: ['./my-chartcomponent.scss']
})
export class MyChartComponent implements OnInit {

  public data: any;

  constructor() { }

  ngOnInit() {
    this.data = {
      labels: ['Low', 'Medium', 'High'],
      datasets: [
        {
          data: [300, 50, 10],
          backgroundColor: [
              '#43a047',
              '#fb8c00',
              '#e53935'
          ],
          hoverBackgroundColor: [
              '#66bb6a',
              '#ffa726',
              '#ef5350'
          ]
        }]
      };
  }
}

Answer 1

还在用旧的angular-cli.json模式思考。在新的 angular.json 中有一个测试部分，您还必须在其中添加第 3 方脚本。

    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.bundle.min.js"
        ],
        "assets": [
          "src/favicon.ico"
        ]
      }
    },

Angular 导入 Karma 测试中使用的第 3 方 JS 文件的 6 种正确方法

Angular 6 correct way to import 3rd party JS files used in Karma tests

testing

typescript

karma-runner

angular