Testing Components In Angular: NO_ERRORS_SCHEMA, Stub Components, and ng-mocks

// products.component.ts (Modern Standalone)
import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { ProductsService } from './products.service';
import { ProductsListComponent } from './products-list.component';
 
@Component({
  selector: 'app-products',
  standalone: true,
  imports: [AsyncPipe, ProductsListComponent],
  template: `
    <div class="products-container">
      @if (total$ | async; as total) {
        <h2>We have {{ total }} special offers today!</h2>
      }
      <app-products-list />
    </div>
  `
})
export class ProductsComponent {
  private readonly productsService = inject(ProductsService);
  readonly total$ = this.productsService.totalOffers$;
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProductsComponent]
  }).compileComponents();
});

import { TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ProductsComponent } from './products.component';
 
beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProductsComponent],
    schemas: [NO_ERRORS_SCHEMA] // 👈 Suppresses template compilation errors
  }).compileComponents();
});

import { Component, input } from '@angular/core';
import { Product } from './product.model';
 
@Component({
  selector: 'app-products-list',
  standalone: true,
  template: '<div class="stub-products-list">Mock Products List</div>'
})
export class ProductsListStubComponent {
  readonly products = input<Product[]>([]);
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProductsComponent]
  })
  .overrideComponent(ProductsComponent, {
    remove: { imports: [ProductsListComponent] },
    add: { imports: [ProductsListStubComponent] }
  })
  .compileComponents();
});

npm install ng-mocks --save-dev

import { TestBed } from '@angular/core/testing';
import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { ProductsComponent } from './products.component';
import { ProductsListComponent } from './products-list.component';
 
describe('ProductsComponent with ng-mocks', () => {
  beforeEach(() => {
    return MockBuilder(ProductsComponent) // 1. Keep the component under test real
      .mock(ProductsListComponent)         // 2. Automatically mock the child component!
      .provide([provideHttpClient(), provideHttpClientTesting()]);
  });
 
  it('should create and render child mock cleanly', () => {
    const fixture = MockRender(ProductsComponent);
    const component = fixture.point.componentInstance;
 
    expect(component).toBeTruthy();
    // Verify that the mocked child exists in the DOM without errors
    expect(ngMocks.find(fixture, ProductsListComponent)).toBeTruthy();
  });
});

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
import { of } from 'rxjs';
import { ProductsComponent } from './products.component';
import { ProductsService } from './products.service';
 
describe('ProductsComponent (Modern Standalone)', () => {
  let serviceMock: jasmine.SpyObj<ProductsService>;
 
  beforeEach(async () => {
    serviceMock = jasmine.createSpyObj('ProductsService', [], {
      totalOffers$: of(15)
    });
 
    await TestBed.configureTestingModule({
      imports: [ProductsComponent],
      providers: [
        provideHttpClient(),
        provideHttpClientTesting(),
        { provide: ProductsService, useValue: serviceMock }
      ]
    }).compileComponents();
  });
 
  it('should display the total number of offers from service', () => {
    const fixture = TestBed.createComponent(ProductsComponent);
    fixture.detectChanges();
 
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h2')?.textContent).toContain('15 special offers');
  });
});