Adding depending component in spec.ts, angular 4

Question

I have a component file

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

Here app-sidebar and app-catologdata are child components. I want to write test file for this parent component, but I am getting error 'app-sidebar' is not a known element:

Please help, I am new to angular2 testing.

Answer 1

Make sure you have added both the components in the Module in the

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

Answer 2

If I only want to test the parent, with no child functionality then I like to mock the child components in the parent's .spec file. Something like:

@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 */]
    });
});