Question

我有这个简单的组件：

@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.

Answer 1

错误：此测试模块使用组件MessagesComponent 这是使用＆＃34; templateUrl＆＃34;，但它们从未编译过。请致电＆＃34; TestBed.compileComponents＆＃34;在你的考试之前。

使用Webpack时，您不需要编译组件（使用templateUrl）。当您使用template时，templateUrl应转换为内联angular2-template-loader。

请参阅Angular文档中的webpack.test.js示例。您需要确保您具有加载程序的依赖项。我想你应该已经将它用于主要项目了

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

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

同时查看您的previous question，您的webpack配置也没有任何支持。我想这是你在主应用程序webpack配置中配置的东西。你可以看看它是如何配置的。或者您可以查看this out。它基本上是我从Angular文档中整理出来的一个项目，只是作为一个地方的所有内容的参考。 Angular文档没有添加任何sass支持，但链接的项目确实添加了它。

Answer 2

当运行时环境在测试期间自行编译源代码时，您会收到此测试失败消息。

要解决此问题，请按以下说明调用compileComponents（）。

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

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

请参阅https://angular.io/guide/testing#compile-components了解更多信息。

茉莉花测试简单的Angular2组件无法正常工作

2 个答案: