茉莉花测试简单的 Angular2 组件不工作

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

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.

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

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

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

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

也在看你的, your webpack config doesn't have any sass support either. I imagine this is something that you have configured in the main application webpack config. You can look at that to see how it is configured. Or you can check this out。它基本上是我从 Angular 文档中整理出来的一个项目，只是作为一个地方的所有内容的参考。 Angular 文档没有添加任何 sass 支持，但链接的项目确实添加了它。

Answer 2

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

要更正此问题，请按以下说明调用 compileComponents()。

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

这里必须用async函数调用compileComponents()，然后在'then block'中创建一个组件实例，这样就可以解决问题了。

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

茉莉花测试简单的 Angular2 组件不工作

Jasmine test for simple Angular2 component not working

jasmine

karma-jasmine

webpack

angular2-template

angular