如何在Angular独立组件单元测试中Mock独立指令？

当独立组件直接导入了独立指令时，测试过程中真实指令的逻辑会被执行，导致DOM内容不符合预期。要Mock该独立指令，可按以下步骤操作：

1. 创建Mock指令 #

创建一个与原指令选择器完全一致的独立Mock指令，无需实现原指令的业务逻辑：

import { Directive } from '@angular/core';

@Directive({
  selector: '[appDemoDirective]',
  standalone: true,
})
export class MockDemoDirectiveDirective {}

2. 在测试模块中替换原指令 #

通过TestBed.overrideComponent方法，覆盖目标组件的imports配置，将真实指令替换为Mock指令：

完整测试代码如下：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DemoCmpComponent } from './demo-cmp.component';
import { DemoDirectiveDirective } from './demo-directive.directive';
import { MockDemoDirectiveDirective } from './mock-demo-directive.directive'; // 导入Mock指令

describe('DemoCmpComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [DemoCmpComponent],
    })
    // 覆盖组件的imports，替换真实指令为Mock指令
    .overrideComponent(DemoCmpComponent, {
      remove: { imports: [DemoDirectiveDirective] },
      add: { imports: [MockDemoDirectiveDirective] }
    })
    .compileComponents();
  });

  it('should create and display correct text', () => {
    const fixture = TestBed.createComponent(DemoCmpComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('p').innerHTML).toBe(
      'demo-cmp works!'
    );
  });
});

原理说明 #

独立组件的依赖声明在自身的imports数组中，测试时无法直接通过测试模块的providers或declarations覆盖，必须使用overrideComponent方法修改组件的内部导入配置，让Angular在测试环境中使用Mock指令替代真实指令，从而避免真实指令的DOM修改逻辑影响测试结果。

内容的提问来源于stack exchange，提问作者undefined