title: Angular 5 / Jasmine Unit Test - Cannot read property 'componentInstance' of undefined
body: <p>I have a strange error with my unit tests and for some reason I cannot determine why I am getting this error. U have only two tests. One to make sure the component is created and the other to check that when a component method is called it calls the Mat Dialog .open method... nothing too complex. Here is my code...</p>
  
  <pre><code>describe('ClientDeactivateComponent', () =&gt; {
    let component: ClientDeactivateComponent;
    let fixture: ComponentFixture&lt;ClientDeactivateComponent&gt;;
  
    const spyMatDialog = jasmine.createSpyObj('MatDialog', ['open']);
    const spyRouter = jasmine.createSpyObj('Router', ['navigate']);
    spyRouter.navigate.and.returnValue(Promise.resolve({}));
  
    const spyClientsService = jasmine.createSpyObj('ClientsService', ['deactivateClient']);
    const successDeativation = {};
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          ClientDeactivateComponent,
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        imports: [
          HttpClientModule,
          RouterTestingModule.withRoutes([{path: '**', component: ClientDeactivateComponent}])
        ],
        providers: [
          FormBuilder,
          ClientsService
        ]
      }).overrideComponent(ClientDeactivateComponent, {
          set: {
            providers: [
              {provide: Router, useValue: spyRouter},
              {provide: ClientsService, useValue: spyClientsService},
              {provide: MatDialog, useValue: spyMatDialog},
              {provide: Router, useValue: spyRouter},
              {provide: ActivatedRoute, useValue: {params: from([{id: 1}])}}
            ],
            template: '&lt;div&gt;Overridden template&lt;/div&gt;'
          }
        }
      )
        .compileComponents();
    }));
  
    afterEach(() =&gt; {
      spyMatDialog.open.calls.reset();
      spyRouter.navigate.calls.reset();
      spyClientsService.deactivateClient.calls.reset();
      fixture.detectChanges();
    });
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ClientDeactivateComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    describe('default', () =&gt; {
      /* this works! */
      it('should create', () =&gt; {
        expect(component).toBeTruthy();
      });
  
      /* Why isn't this working? */
      it('should open a modal window when confirmDeactivation is called', () =&gt; {
        component.confirmDeactivation();
        spyClientsService.deactivateClient.and.returnValue(successDeativation);
        expect(spyMatDialog.open).toHaveBeenCalledWith(ConfirmDialogComponent);
      });
    });
  });
  </code></pre>
  
  <p>The first test passes as expected however the second test fails giving the following error:</p>
  
  <p><strong>TypeError: Cannot read property 'componentInstance' of undefined</strong></p>
  
  <p>I have looked at many answers here and what I have applied to try and fix this hasn't worked. I am sure it is something to do with how the testbed is loaded but I can't determine what is wrong and why?</p>