góc 2 & Jasmine: Lỗi: Vui lòng gọi "TestBed.compileComponents" trước khi thử nghiệm của bạn

Question

Tôi nhận được lỗi này:

Error: This test module uses the component MessagesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. 

Khi cố gắng để chạy thử nghiệm đơn giản này kiễu góc 2 & Jasmine Test:

let comp: MessagesComponent; 
let fixture: ComponentFixture<MessagesComponent>; 

describe('MessagesComponent',() => { 
    beforeEach(() => { 


     TestBed.configureTestingModule({ 
      declarations: [ MessagesComponent ], 
      providers: [ {provide: DataService, useValue: {} } ] 

     }) 
      .compileComponents(); // compile template and css 

     fixture = TestBed.createComponent(MessagesComponent); 
     comp = fixture.componentInstance; 

    }); 

    it('example',() => { 
     expect("true").toEqual("true"); 
    }); 
}); 

tôi nghĩ rằng nó có thể là do một cái gì đó với cấu hình thử nghiệm webpack của tôi:

'use strict'; 

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    devtool: 'inline-source-map', 
    module: { 
     loaders: [ 
      { loader: 'raw', test: /\.(css|html)$/ }, 
      { exclude: /node_modules/, loader: 'ts', test: /\.ts$/ } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts'], 
     modulesDirectories: ['node_modules'], 
     root: path.resolve('.', 'src') 
    }, 
    tslint: { 
     emitErrors: true 
    } 
}; 

Answer 1

Tìm nạp mẫu không đồng bộ khi các mẫu của bạn không được gạch chân vào các thành phần của bạn, vì vậy bạn cần phải nói cho Jasmine biết. Thay đổi

beforeEach(() => { 
    TestBed.configureTestingModule({ ... }) 
     .compileComponents(); 
    fixture = TestBed.createComponent(MessagesComponent); 
    comp = fixture.componentInstance; 
}); 

để

beforeEach(async(() => { 
    TestBed.configureTestingModule({ ... }) 
     .compileComponents() 
     .then(() => { 
      fixture = TestBed.createComponent(MessagesComponent); 
      comp = fixture.componentInstance; 
     }); 
})); 

Answer 2

Vì bạn đang sử dụng webpack, về mặt lý thuyết bạn không nên phải gọi compileComponents() chức năng theo doc chính thức here, vì webpack inlines mẫu và css như một phần của quá trình xây dựng tự động trước khi chạy thử nghiệm.

Một lý do có thể là mẫu của bạn/css không inlined là IDE (VisualStudio/WebStorm/IntelliJ) tự động biên dịch ts của bạn để js và các bộ tải webpack mà nhắm mục tiêu cho js/ts file đang cố gắng để có được áp dụng trên đã biên soạn js file thay vì của tệp ts nguồn.