Angular 2 unit test parsing error using webpack - unit-testing

Question

I'm getting the follow error when I run Angular 2 unit test using webpack:
FAILED TESTS:
Other Trims Tested
✖ should display other trims articles
PhantomJS 2.1.1 (Linux 0.0.0)
Error: Template parse errors:
Unexpected closing tag "div" ("module.exports = "<div *ngFor=\"let trim of otherTrims\">\n {{ trim.name }}\n[ERROR ->]</div>\n\n<!--<div class='test-name'>{{ otherTrims[0].name }}</div>-->\n";"): OtherTrimsTestedComponent#0:78 in /app/config/spec-bundle.js (line 52805)
I see that it is testing webpacks bundle-js file but I am not sure if there is another import I have to do from angular core tests
I have my HTML setup as:
<div *ngFor="let trim of otherTrims">
{{ trim.name }}
</div>
and spec test as:
import {
it,
fdescribe,
expect,
inject,
async,
TestComponentBuilder
} from '#angular/core/testing';
import { OtherTrimsTestedComponent } from './other-trims-tested.component';
let mockData = [
{
'featured_image': 'http://test.url.com',
'article_type': 'Test',
'article_url': 'http://test.url.com',
'name': 'Ford F-150 Raptor',
'specs' : '4 Door AWD Pickup Truck, 150Bhp, 285 lb-ft, 8-sp Automatic',
'msrp': '50,000'
}
];
fdescribe('Other Trims Tested', () => {
it('should have a selector', () => {
let annotations = Reflect.getMetadata('annotations', OtherTrimsTestedComponent);
expect(annotations[0].selector).toBe('other-trims-tested');
});
it('should display other trims articles', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb.createAsync(OtherTrimsTestedComponent).then(fixture => {
// Get components
let otherTrimsTestedComponent = fixture.componentInstance; // Get component instance
let element = fixture.nativeElement; // Get test component elements
otherTrimsTestedComponent.otherTrims = mockData;
// Detect changes? (How?)
fixture.detectChanges();
// Test against data
expect(element.querySelector('.test-name').innerText).toBe('Ford F-150 Raptor2');
});
})));
});
and Component:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'other-trims-tested',
template: require('./other-trims-tested.component.html')
})
export class OtherTrimsTestedComponent implements OnInit {
#Input() otherTrims: any[];
constructor() { }
ngOnInit() { }
}
Any hints/articles can help. Thanks

Answer 1

Have you added html-loader to your webpack test configuration?
rules: [
...
{
test: /\.html$/,
loader: 'raw-loader'
}
...
}