Javascript 如何将外部库包括到单元测试中：：Angular2 CLI

我正在为我的项目编写测试用例。但不幸的是，在通过键入

ng test

启动测试后，我收到以下错误：

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

Plotly

是一个外部图表库。我试图在

测试文件中声明它：

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+/);
  });

});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从'@angular/forms'导入{FormsModule}；
从“@angular/material”导入{MaterialModule}；
从“./watchlist.component”导入{WatchlistComponent}；
明确声明：有；
描述（'SystemComponent'，（）=>{
let组件：WatchlistComponent；
let夹具：组件夹具；
let元素；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[WatchlistComponent]，
导入：[FormsModule，MaterialModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（WatchlistComponent）；
组件=fixture.componentInstance；
元素=fixture.nativeElement；
fixture.detectChanges（）；
});
它（'应该返回一个正数'，（）=>{
expect（component.getScreenHeight（））.toMatch（/\d+/）；
});
});

不幸的是，它仍然无法清楚地看到
并返回错误。
getScreenHeight（）
函数的第一个测试用例甚至没有启动

也许jasmine在上传之前就开始测试了

编辑：
我正在通过在我的
index.html
文件中包含
来导入
Plotly
Plotly
与
index.html
本地存储在同一文件夹中。
通过在Karma.config.js中添加文件config，将Plotly.js（具有适当路径）文件加载到Karma testing env中，如下所示：

karma.config.js

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

您没有在测试中详细导入。你应该有一行字，上面写着像“Plotly”中的
import*as Plotly。就像你应该在你的Angular应用程序的文件中有相同的行一样，你正在使用Plotly。除非。。。。。。。。。。。您在
index.html
中包含一个带有
标记的Plotly，并将其用作全局变量。但在这种情况下，错误的不仅仅是测试，而是你使用第三方库的方式。不要对每个答案都投赞成票，这不会让其他读者知道什么是有用的；向上投好票。@AngularFrance检查我编辑的问题。那么我应该改变导入库的方式吗？@Natalia。这正是我要说的。：）您应该使用
import
语句导入第三方库。但是要小心：根据您使用的模块加载器（SystemJS，webpack…），您可能需要调整配置，以便导入工作。@AngularFrance我使用的是webpack。那么我应该从npm下载
Plotly
？