简单Angular2组件的茉莉花试验不起作用

我有一个简单的组件：

@Component({
    selector: 'messages',
    styleUrls: ['messages.component.scss'],
    templateUrl: 'messages.component.html',
})
export class MessagesComponent implements OnInit {

    constructor(private dataService: DataService) {}

    public getOne(): number{
        return 1;
    }
}

我正在尝试对其进行测试，但无法使其正常工作。请帮助：

describe('Component: MessagesComponent', () => {
    let component: MessagesComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MessagesComponent],
        }).compileComponents();

        const fixture = TestBed.createComponent(MessagesComponent);
        component = fixture.componentInstance;
    });

    it('should have a defined component', () => {
        expect(true).toBeTruthy();
    });

});

（如果相关，我正在使用webpack）

这是我得到的错误：

    Error: This test module uses the component MessagesComponent
 which is using a "templateUrl", but they were never compiled.
 Please call "TestBed.compileComponents" before your test.

错误：此测试模块使用组件消息component 它使用的是“templateUrl”，但它们从未被编译过。 请在测试之前调用“TestBed.compileComponents”

使用Webpack时，不需要编译组件（使用

templateUrl

）。使用

angular2模板加载器时，templateUrl应转换为内联
template
s

请参见角度文档中的示例。您需要确保对加载程序具有依赖性。我想你应该已经把它用于主要项目了

"devDepdendencies": {
  "angular2-template-loader": "^0.4.0",
}

如果您仍然对我上面链接的单个配置文件感到困惑，您可能只想阅读整个配置文件。不会花那么长时间的。但它将引导您完成主应用程序和测试的设置

再看看你的网页，你的网页配置也没有任何sass支持。我想这是您在主应用程序网页配置中配置的东西。你可以看看它是如何配置的。或者你可以查一下。这基本上是我从Angular文档中整理出来的一个项目，只是作为一个地方所有东西的参考。Angular docs没有添加任何sass支持，但是链接的项目添加了它。
当运行时环境在测试期间编译源代码时，您会收到此测试失败消息

要更正此问题，请调用compileComponents（），如下所述

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ YourComponent ],
  })
  .compileComponents()
  .then(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
  });
}));

在这里，我们必须使用异步函数调用compileComponents（），然后在“then block”中创建一个组件实例，这将解决问题

有关更多信息，请参阅