如何将外部库包含到单元测试中：: Angular2-CLI

Question

I'm writing test cases for my project. But unfortunately, after starting the tests by typing ng test , I'm receiving following error:

Error: Error in :0:0 caused by: Plotly is
ReferenceError: Plotly is not defined

Plotly is an external, chart library. I've tried to declare it inside the test file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { WatchlistComponent } from './watchlist.component';
declare let Plotly: any;

describe('SystemComponent', () => {
  let component: WatchlistComponent;
  let fixture: ComponentFixture<WatchlistComponent>;
  let element;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ WatchlistComponent ],
      imports: [ FormsModule, MaterialModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WatchlistComponent);
    component = fixture.componentInstance;
    element = fixture.nativeElement;
    fixture.detectChanges();
  });


  it('should return a positive number', () => {
    expect(component.getScreenHeight()).toMatch(/\d+/);
  });

});

Unfortunately, it still doesn't see the Plotly and returns error. The first test case for getScreenHeight() function is not even being started.

Maybe jasmine is starting the tests even before it was uploaded?

Edit : I'm importing Plotly by including <script src='plotly.js'></script> in my index.html file. Plotly is stored locally in the same folder as index.html is.

Answer 1

Load plotly.js ( with appropriate path ) file into Karma testing env by adding files config in karma.config.js as below:

karma.config.js

config.set({
   ..
   files: ['plotly.js']
   ..
});