web-dev-qa-db-ja.com

エラー：テストの前に「TestBed.compileComponents」を呼び出してください

このエラーが発生します：

エラー：このテストモジュールは、「templateUrl」を使用しているコンポーネントMessagesComponentを使用していますが、コンパイルされていません。テストの前に「TestBed.compileComponents」を呼び出してください。

この簡単なテストを実行しようとするとAngular 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");
    });
});

Webpackのテスト構成に問題がある可能性があると思います。

'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
    }
};
angularjasminewebpackkarma-jasmineangular2-template
11
CommonSenseCode

テンプレートがコンポーネントにインライン化されていない場合、テンプレートのフェッチは非同期であるため、Jasmineにそのことを伝える必要があります。変化する

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

に

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

すでにwebpackを使用しているので、理論的には、公式ドキュメントに従ってcompileComponents()関数を呼び出す必要はありません ここwebpackインラインであるため、テストの実行に先立つ自動ビルドプロセスの一部としてのテンプレートとcss。

テンプレート/ cssがインライン化されていない理由の1つとして、IDE（VisualStudio/WebStorm/IntelliJ）がtsをjsに自動コンパイルし、js/tsファイルをターゲットとするWebpackローダーがソースtsファイルの代わりにすでにコンパイルされたjsファイル。

1
LeOn - Han Li