title: Mocking Child Components - Angular 2
body: <p>How do you mock a child component when testing? I have a parent component called <code>product-selected</code> whose template looks like this:</p>
  
  <pre><code>&lt;section id="selected-container" class="container-fluid"&gt;
      &lt;hr/&gt;
    &lt;product-settings&gt;&lt;/product-settings&gt;
    &lt;product-editor&gt;&lt;/product-editor&gt;
    &lt;product-options&gt;&lt;/product-options&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And the component declaration looks like this:</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>This component is really just a place for the other components to live in and probably won't contain any other functions. </p>
  
  <p>But when I set up the testing I get the following template error, repeated for all three components:</p>
  
  <pre><code>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. ("
          &lt;hr/&gt;
        &lt;product-settings&gt;&lt;/product-settings&gt;
        [ERROR -&gt;]&lt;product-editor&gt;&lt;/product-editor&gt;
  </code></pre>
  
  <p>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?</p>