title: Angular Unit Testing - Mock Child Component using Stub
body: <p>I am trying to unit test a component that has a child component that I want to mock. I don't want to use the NO_ERRORS_SCHEMA cause the drawbacks associated. I am trying to use a stub/dummy child component. The code is as follows: </p>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'parent',
    template: `
      &lt;!-- Does other things --&gt;
      &lt;child&gt;&lt;/child&gt;
    `
  })
  export class ParentComponent { }
  </code></pre>
  
  <p><strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child',
    template: '&lt;!-- Does something --&gt;'
  })
  export class ChildComponent {
    @Input() input1: string;
    @Input() input2?: number;
  }
  </code></pre>
  
  <p><strong>parent.component.spec.ts</strong></p>
  
  <pre><code>describe('ParentComponent', () =&gt; {
    let component: ParentComponent;
    let fixture: ComponentFixture&lt;ParentComponent&gt;;
    let router: Router;
  
    @Component({
      selector: 'child',
      template: '&lt;div&gt;&lt;/div&gt;'
    })
    class ChildStubComponent {
      @Input() input1: string;
      @Input() input2: number;
    }
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ ParentComponent, ChildStubComponent ],
        imports: [
          AppRoutingModule, HttpClientModule, BrowserAnimationsModule,
          RouterTestingModule.withRoutes(routes)
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ParentComponent);
      component = fixture.componentInstance;
      router = TestBed.get(Router);
      spyOnProperty(router, 'url', 'get').and.returnValue('/somePath');
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      component.ngOnInit();
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>The problem I'm having is that angular is complaining with the following error: </p>
  
  <pre><code>Failed: Template parse errors:
  More than one component matched on this element.
  Make sure that only one component's selector can match a given element.
  </code></pre>
  
  <p>I'm using Angular version 8 if that helps. Everywhere I looked so far shows that you stub a child component the same way I am doing now. Using ngMocks is not an option at the moment.</p>
  
  <p><strong>EDIT</strong>
  Tried using ngMock but this only has the same problem. Any help would be very much appreciated!</p>
  
  <p><strong>Solution</strong></p>
  
  <p>Got it working. Problem was that the AppRoutingModule had the real component imported already.</p>