javascript - How to include external library into unit tests::Angular2-CLI - Stack Overflow

admin管理员组

文章数量:1389959

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 './watchlistponent';
declare let Plotly: any;

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

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

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


  it('should return a positive number', () => {
    expect(ponent.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.

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.ponent';
declare let Plotly: any;

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

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

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


  it('should return a positive number', () => {
    expect(ponent.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.

• javascript
• unit-testing
• angular
• jasmine
• karma-jasmine

Share Improve this question Follow edited Feb 13, 2017 at 14:05 Natalia asked Feb 13, 2017 at 13:49 NataliaNatalia 1,02722 gold badges1212 silver badges2525 bronze badges 8

• You're not importing Plotly in your test. You should have a line that says something like import * as Plotly from 'plotly';. Just like you should have the same line in the files of your Angular app where you're using Plotly. Unless........... you're including Plotly with a <script> tag in index.html and using it a global variable. But in this case, it's not just the test that's wrong, it's the way you're using the 3rd-party library. – AngularChef Commented Feb 13, 2017 at 13:58
• Don't upvote every answer, that gives other readers no information about what's useful; upvote good ones. – jonrsharpe Commented Feb 13, 2017 at 14:00
• @AngularFrance Check my edited question. Should I change the way I'm importing the library then? – Natalia Commented Feb 13, 2017 at 14:05
• @Natalia. That's exactly what I'm saying. :) You should import 3rd party libraries with an import statement. But be careful: depending on which module loader you're using (SystemJS, webpack...) you might have to adjust your configuration for the import to work. – AngularChef Commented Feb 13, 2017 at 14:12
• @AngularFrance I'm using webpack. Should I download Plotly from npm then? – Natalia Commented Feb 13, 2017 at 14:14

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptHow to include external library into unit testsAngular2CLIStack Overflow