DebugElement.componentInstance returning the wrong component

🐞 bug report

Affected Package

N/A

Is this a regression?

N/A

Description

DebugElement.componentInstance is returning the wrong component.

🔬 Minimal Reproduction

Create a new app.

ng new test-app --defaults

Create two components.

ng g c pet-list
ng g c pet-display

In src/app/pet-list/pet-list.component.html use pet display component.

<app-pet-display></app-pet-display>

In src/app/app.component.html use pet list component.

<app-pet-list></app-pet-list>

In src/app/pet-list/pet-list.component.spec.ts add a test spec.

it('Should lookup child', () => {
  let pd = fixture.debugElement.query(By.css("app-pet-display"))
  
  expect(pd.componentInstance.constructor.name).toBe("PetDisplayComponent")
})

Run test.

npm test

The test case above fails:

Expected 'PetListComponent' to be 'PetDisplayComponent'.

🔥 Exception or Error

N/A

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.7
Node: 10.14.2
OS: darwin x64

Angular: 10.0.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

[bibhas2]

Ah, yes. That was my mistake. Adding PetDisplayComponent to declarations fixed the issue.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ 
      PetDisplayComponent,
      PetListComponent ]
  })
  .compileComponents();
}));

[jnizet]

OK, so it’s exactly as I suspected. Read the error messages in your terminal. It says:

ERROR: ''app-pet-display' is not a known element:
1. If 'app-pet-display' is an Angular component, then verify that it is part of this module.
2. If 'app-pet-display' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this 

And you get that error because you haven’t added PetDisplayComponent to the declarations of your testing module, inside configureTestingModule. So, as the eror message explains, Angular doesn’t know what the <app-pet-display> element is: it’s not a standard HTML element, and it’s not, inside this test, known as an angular component either.