Angular 测试组件模拟不会覆盖常规组件

Question

我正在为我的组件 AskComponent 编写单元测试。我想模拟嵌入式组件 EditComponent，如 https://angular.io/guide/testing-components-scenarios#component-with-a-dependency 中所述 测试脚本：

import {ComponentFixture, TestBed} from '@angular/core/testing';

import {AskComponent} from './ask.component';
import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
import {HttpClient} from "@angular/common/http";
import {Component} from "@angular/core";

@Component({standalone: true, selector: 'stt-edit', template: ''})
class EditStubComponent {
  constructor() {
    console.log('edit stub new');
  }
}

describe('AskComponent', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;
  let askComponent: AskComponent;
  let fixture: ComponentFixture<AskComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [EditStubComponent, AskComponent, HttpClientTestingModule]
    })
      .compileComponents();
    httpClient = TestBed.inject(HttpClient);
    httpTestingController = TestBed.inject(HttpTestingController);
    fixture = TestBed.createComponent(AskComponent);
    askComponent = fixture.componentInstance;
    fixture.detectChanges();
  });

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

编辑组件：

\\import ...
@Component({
  selector: 'stt-edit',
  standalone: true,
  imports: [ ...  ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => EditComponent),
      multi: true
    }
  ],
  templateUrl: './edit.component.html',
  styleUrl: './edit.component.css'
})
export class EditComponent implements ControlValueAccessor {
  constructor() {
    console.log('edit new');
  }
  // ...
}

当我运行测试时，没有使用模拟组件，正如我通过“编辑新”控制台输出看到的那样。仅当我将 EditComponent 中的“stt-edit”选择器更改为“stt-edit2”之类的内容时，才会注入 EditStubComponent。 我做错了什么？

Answer 1

我能够做到这一点，使用

overrideModule

然后我们可以删除

ChildComponent

并添加

ChildStubModule

这将解决问题！

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Component } from '@angular/core';
import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component';
import { AppModule } from './app.module';

@Component({ standalone: true, selector: 'app-child', template: '' })
class ChildStubComponent {
  constructor() {
    console.log('edit stub new');
  }
}

describe('AskComponent', () => {
  let askComponent: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.overrideModule(AppModule, {
      remove: {
        imports: [ChildComponent],
      },
      add: {
        imports: [ChildStubComponent],
      },
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    askComponent = fixture.componentInstance;
    fixture.detectChanges();
  });

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

堆栈闪电战