Angular单元测试运行ng test --watch=false报fixture已销毁错误如何解决

问题原因 #

这个错误和你将MenuComponent放在<ng-template>内部的布局直接相关：
<ng-template>默认是惰性渲染的，只有当宿主逻辑（此处为Kendo Grid的列菜单触发逻辑）激活它时，内部的<app-my-menu>才会被真实实例化插入DOM。你当前在beforeEach阶段就提前通过TestbedHarnessEnvironment.harnessForFixture获取MenuHarness，此时<ng-template>还未被渲染，获取到的Harness关联的组件实例本身就是无效的，后续测试执行时一旦模板状态更新，无效关联的fixture会被提前销毁，调用openMenu时就会抛出对应错误。
另外ng test --watch=false模式下测试用例执行完成后会立刻销毁所有测试上下文，如果你有未被正确await的异步操作，也会出现操作执行时fixture已经被销毁的问题。

解决方法 #

1. 调整Harness获取时机 #

不要在beforeEach阶段提前获取MenuHarness，改为在测试用例中先触发<ng-template>渲染后再获取Harness，修改后的测试代码参考如下：

describe("MenuComponent", () => {
    let testHostFixture: ComponentFixture<TestHostComponent>;
    // 仅声明不提前赋值
    let myMenuHarness: MenuHarness;

    beforeEach(
        waitForAsync(() => {
            TestBed.configureTestingModule({
                declarations: [...],
                imports: [...],
                providers: [...],
            }).compileComponents();
        })
    );

    beforeEach(async () => {
        testHostFixture = TestBed.createComponent(TestHostComponent);
        testHostFixture.detectChanges();
        // 移除此处提前获取Harness的逻辑
    });

    describe("simple test", () => {
        it("should pass", async () => {
            // 第一步：触发列菜单弹出，让ng-template内部内容渲染
            // 替换为你实际Kendo Grid列菜单按钮的选择器
            const columnMenuBtn = testHostFixture.nativeElement.querySelector('.k-column-menu-button');
            columnMenuBtn.click();
            testHostFixture.detectChanges();
            // 等待模板渲染完成后再获取Harness
            myMenuHarness = await TestbedHarnessEnvironment.harnessForFixture(
                testHostFixture,
                MenuHarness
            );
            await myMenuHarness.openMenu();
            expect(true).toBeTrue();
        });
    });

    @Component({
        selector: `my-test-host-component`,
        template: `<kendo-grid ...>
            <ng-template kendoGridColumnMenuTemplate let-service="service">
                <app-my-menu [service]="service"></app-my-menu>
            </ng-template>
            <kendo-grid-column ... ></kendo-grid-column>
        </kendo-grid>`,
    })
    class TestHostComponent {
        @ViewChild(MenuComponent)
        public menu?: MenuComponent;
    }
});

2. 补全异步逻辑校验 #

检查MenuHarness的openColumnMenu方法，确保所有DOM操作、异步状态更新都被正确await，避免出现未捕获的异步任务在测试结束后才执行：

public async openColumnMenu() {
    const element = await this.queryColumnMenuButton();
    // 增加非空判断，避免空元素调用click导致后续逻辑异常
    if (element) {
        await element.click();
    }
}

3. 拆分测试用例（可选优化） #

可以拆分两类测试用例：

• 基础功能测试：直接将app-my-menu放在ng-template外测试核心逻辑，降低测试耦合
• 集成测试：单独写用例验证在Kendo Grid列菜单模板下的兼容逻辑

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