Question

我有一个组件文件

<div class="content-wrapper">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col panel--raised white-bg top-17">
            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--3-col sidebar-main">
                    <app-sidebar [treeData]="serviceJsonData" (ItemChange)='displayItem($event)'></app-sidebar>
                </div>
                <div class="mdl-cell mdl-cell--9-col">
                    <app-catologdata [isClicked]="isClicked" [scatalogId]="scatalogId" (searchData)="sCatalogFilterData($event)"></app-catologdata>
                </div>
            </div>
        </div>
    </div>
</div>

此处app-sidebar和app-catologdata是子组件。我想为此父组件编写测试文件，但出现错误'app-sidebar' is not a known element:

请帮助，我是angular2测试的新手。

Answer 1

确保已在

的模块中添加了这两个组件

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC } etc
  ]
})

Answer 2

如果我只想测试父级，而没有子级功能，那么我想模拟父级.spec文件中的子级组件。像这样：

@Component({
    selector: `app-sidebar`,
    template: `<p>Mock Sidebar Component</p>`
})
class MockSidebarComponent {}

@Component({
    selector: `app-catalogdata`,
    template: `<p>Mock CatalogData Component</p>`
})
class MockCatalogDataComponent {}

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [
            ParentComponent,
            MockSidebarComponent,
            MockCatalogDataComponent
        ],
        providers: [/* all providers */]
    });
});

在spec.ts中添加相关组件，角度为4

2 个答案: