使用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文件，但我不确定是否需要从angular核心测试中进行另一个导入

我将我的HTML设置为：

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

和spec测试如下：

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

}

任何提示/文章都可以提供帮助。谢谢

Answer 1

您是否已将html-loader添加到您的webpack测试配置中？

rules: [
 ...
    {
        test: /\.html$/,
        loader: 'raw-loader'
    }

...
}