2016-11-05 255 views
0

我有这个简单的组件简单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. 

回答

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应该转换为内嵌template

请参阅Angular文档中的webpack.test.js示例。您需要确保您具有加载器的依赖关系。我猜想你应该已经拥有它用于虽然

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

如果你还在困惑我联系上面的单一配置文件中的主要项目,你可能只是想读取整个Angular docs on webpack。不应该花那么长时间。但它会引导您完成主应用程序和测试的设置。

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