unit-testing - webpackを使用したAngular 2単体テストの解析エラー

Question

webpack を使用して Angular 2 単体テストを実行すると、次のエラーが発生します。

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)

webpacks bundle-js ファイルをテストしていることがわかりますが、角度コア テストから実行する必要がある別のインポートがあるかどうかはわかりません

私のHTML設定は次のとおりです。

<div *ngFor="let trim of otherTrims">
  {{ trim.name }}
</div>

および仕様テストとして：

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

およびコンポーネント:

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() { }

}

ヒント/記事が役立ちます。ありがとう