這是我需要進行單元測試的Component UI:

可以看到它依賴了另一個Component,其selector為cx-carousel.

因此我在單元測試實現文件里，給它創建一個mock Component：MockCarouselComponent：

@Component({selector: 'cx-carousel',template: `<ng-container *ngFor="let item$ of items"><ng-container*ngTemplateOutlet="template; context: { item: item$ | async }"></ng-container></ng-container>`, }) class MockCarouselComponent {@Input() title: string;@Input() template: TemplateRef<any>;@Input() items: any[]; }

可以看到，MockComponent和生產版本的Component，屬性類型和名稱完全一致：

mock的carousel title數據：

生產代碼里，carousel template里顯示的屬性有name和price：

為這兩個屬性提供的mock數據：

最后生成的mock UI：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular Component UI单元测试的隔离策略的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。