使用ng-apexcharts导致Angular单元测试清理阶段报错

核心解决方案：Mock ng-apexcharts组件 #

真实的ng-apexcharts组件在测试销毁阶段会操作DOM节点，而单元测试环境中DOM上下文可能提前被清理，导致报错。直接Mock该组件即可规避这个问题，具体步骤如下：

1. 创建Mock组件 #

在测试文件中（或单独的mock文件）定义一个与原组件选择器一致的Mock组件，不需要实现任何真实图表逻辑：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'apx-chart', // 必须与ng-apexcharts的组件选择器完全一致
  template: ''
})
export class MockApexChartComponent {
  @Input() chartOptions: any; // 模拟原组件的输入属性，匹配你的组件中用到的输入
  // 如果你的组件中调用了图表实例的方法（比如updateOptions），需要模拟这些方法
  updateOptions(options: any) {
    return Promise.resolve(); // 空实现，避免调用时报错
  }
}

2. 在测试模块中替换真实组件 #

在TestBed.configureTestingModule中，将真实的ApexChartComponent替换为Mock组件：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
import { MockApexChartComponent } from './mock-apex-chart.component'; // 引入Mock组件

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        HomeComponent,
        MockApexChartComponent // 用Mock组件替代真实的ApexChartComponent
        // 移除原有的ApexChartComponent声明
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  // 其他测试用例...
});

3. 处理组件内的图表实例依赖（如果有） #

如果你的HomeComponent中通过@ViewChild获取了图表实例并调用了方法，比如：

// HomeComponent.ts
import { ViewChild } from '@angular/core';
import { ApexChartComponent } from 'ng-apexcharts';

export class HomeComponent {
  @ViewChild(ApexChartComponent) chart: ApexChartComponent;

  updateChart() {
    this.chart.updateOptions({ /* 新配置 */ });
  }
}

此时需要确保Mock组件中的方法与真实组件签名一致，如步骤1中添加的updateOptions方法，这样测试时调用该方法不会报错。

为什么延迟销毁无效？ #

你之前尝试的延迟销毁无法解决问题，因为报错是真实图表组件内部在销毁生命周期中尝试访问已被测试框架清理的DOM节点，Mock组件完全跳过了这些真实的DOM操作，从根源避免了错误。

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