Testing Angular Components with Children using Jest

parent-component.ts @Component({ selector: 'app-parent', template: ` Parent Component `, }) export class ParentComponent { parentValue = 'Parent Value'; } parent-component.spec.ts import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ParentComponent } from './parent.component'; import { Component, Input } from '@angular/core'; import { By } from '@angular/platform-browser'; // Child component mock @Component({ selector: 'app-child', template: '{{ value }}' }) class MockChildComponent { @Input() value: string = ''; } describe('ParentComponent', () => { let parentComponent: ParentComponent; let fixture: ComponentFixture; let childComponent: MockChildComponent; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ParentComponent, MockChildComponent] // Use mock instead of real child }); fixture = TestBed.createComponent(ParentComponent); parentComponent = fixture.componentInstance; childComponent = fixture.debugElement.query(By.directive(MockChildComponent)).componentInstance as MockChildComponent; fixture.detectChanges(); }); it('should create', () => { expect(parentComponent).toBeTruthy(); }); it('should pass the correct value to child component', () => { expect(childComponent.value).toBe('Parent Value'); }); it('should update child component when parent value changes', () => { parentComponent.parentValue = 'New Value'; fixture.detectChanges(); expect(childComponent.value).toEqual('New Value'); }); }); Tip: The mock child component (MockChildComponent) ensures you're only testing the parent component's behavior.

Apr 17, 2025 - 16:07

Testing Angular Components with Children using Jest

parent-component.ts

@Component({
  selector: 'app-parent',
  template: `
    
      Parent Component
      
    
  `,
})
export class ParentComponent {
  parentValue = 'Parent Value';
}

parent-component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ParentComponent } from './parent.component';
import { Component, Input } from '@angular/core';
import { By } from '@angular/platform-browser';

// Child component mock
@Component({
  selector: 'app-child',
  template: '{{ value }}'
})
class MockChildComponent {
  @Input() value: string = '';
}

describe('ParentComponent', () => {
  let parentComponent: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;
  let childComponent: MockChildComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, MockChildComponent] // Use mock instead of real child
    });
    fixture = TestBed.createComponent(ParentComponent);
    parentComponent = fixture.componentInstance;
    childComponent = fixture.debugElement.query(By.directive(MockChildComponent)).componentInstance as MockChildComponent;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(parentComponent).toBeTruthy();
  });

  it('should pass the correct value to child component', () => {
    expect(childComponent.value).toBe('Parent Value');
  });

  it('should update child component when parent value changes', () => {
    parentComponent.parentValue = 'New Value';
    fixture.detectChanges();

    expect(childComponent.value).toEqual('New Value');
  });

});

Tip: The mock child component (MockChildComponent) ensures you're only testing the parent component's behavior.