Mocking Child Components - Angular 2

Question

How do you mock a child component when testing? I have a parent component called product-selected whose template looks like this:

<section id="selected-container" class="container-fluid">     <hr/>   <product-settings></product-settings>   <product-editor></product-editor>   <product-options></product-options> </section> 

And the component declaration looks like this:

import { Component, Input }               from '@angular/core';   import { ProductSettingsComponent } from '../settings/product-settings.component';                                       import { ProductEditorComponent }   from '../editor/product-editor.component';                                       import { ProductOptionsComponent }  from '../options/product-options.component';                                          @Component({     selector: 'product-selected',     templateUrl: './product-selected.component.html',     styleUrls: ['./product-selected.component.scss'] }) export class ProductSelectedComponent {} 

This component is really just a place for the other components to live in and probably won't contain any other functions.

But when I set up the testing I get the following template error, repeated for all three components:

Error: Template parse errors:     'product-editor' is not a known element:     1. If 'product-editor' is an Angular component, then verify that it is part of this module.     2. If 'product-editor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("         <hr/>       <product-settings></product-settings>       [ERROR ->]<product-editor></product-editor> 

I've tried to load a mocked version of the child components but don't know how to do - the examples that I've seen just override the parent and don't even mention the child components. So how do I go about doing it?

Answer 1

Careful about the NO_ERRORS_SCHEMA. Let's quote another part of the same the docs:

Shallow component tests with NO_ERRORS_SCHEMA greatly simplify unit testing of complex templates. However, the compiler no longer alerts you to mistakes such as misspelled or misused components and directives.

I find that drawback quite contrary to the purposes of writing a test. Even more so that it's not that hard to mock a basic component.

An approach not yet mentioned here is simply to declare them at config time:

@Component({   selector: 'product-settings',   template: '<p>Mock Product Settings Component</p>' }) class MockProductSettingsComponent {}  @Component({   selector: 'product-editor',   template: '<p>Mock Product Editor Component</p>' }) class MockProductEditorComponent {}  ...  // third one  beforeEach(() => {   TestBed.configureTestingModule({       declarations: [         ProductSelectedComponent,         MockProductSettingsComponent,         MockProductEditorComponent,         // ... third one       ],       providers: [/* your providers */]   });   // ... carry on });