CODEWITHSUNDEEP
angulartypescripttestingkarma-runner
Steve Fitzsimons
Steve Fitzsimons

Reputation: 3904

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

I have a component that uses primeng ChartsModule which references Chart.js. I have Chart.js installed and I have it imported in my angular.json file.

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

The app all works correctly and displays the charts. My component tests however break with the error: ReferenceError: Chart is not defined

I've seen a few articles that suggest importing Chart.js into my component tests like the following:

import { Chart } from 'chart.js';

This doesn't work. My question is what is the correct way to import 3rd party JS libraries such as Chart.js into Angular 6 Karma tests

Edit My component

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

Upvotes: 0

Views: 1715

Answers (1)

Steve Fitzsimons
Steve Fitzsimons

Reputation: 3904

Was still thinking in old angular-cli.json mode. In the new angular.json there is a test section where you have to add the 3rd party scripts also.

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

Upvotes: 1

Related Questions