使用 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>

和规范测试：

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

...
}