web-dev-qa-db-fra.com

Erreur: Veuillez appeler "TestBed.compileComponents" avant votre test

Je reçois cette erreur:

Erreur: Ce module de test utilise le composant MessagesComponent qui utilise un "templateUrl", mais ils n'ont jamais été compilés. Veuillez appeler "TestBed.compileComponents" avant votre test.

Lorsque vous essayez de lancer ce test simple Angular 2 & Test de Jasmin:

  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");
    });
});

Je pense que cela pourrait être dû à quelque chose dans la configuration de test de mon 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

L'extraction de modèles est asynchrone lorsque vos modèles ne sont pas insérés dans vos composants. Vous devez donc le dire à Jasmine. Changement

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

à

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

Puisque vous utilisez déjà webpack, théoriquement, vous ne devriez pas avoir à appeler la fonction compileComponents() conformément à la doc officielle here , car webpack inlines templates et css dans le cadre du processus de construction automatisé précédant l’exécution du test.

Une raison possible pour laquelle votre modèle/css ne sont pas alignés est que l'IDE (VisualStudio/WebStorm/IntelliJ) compile automatiquement vos ts en js et les chargeurs de packs Web qui ciblent les fichiers js/ts tentent de s'appliquer aux fichiers déjà compilés des fichiers source ts. 

0
Leon li