Angular组件Jasmine测试遇自定义HTML元素报错的解决方法咨询

我之前也碰到过这个情况！Angular CLI自动生成的默认测试用例本来只是要验证组件是否创建成功，但一旦组件HTML里有非标准自定义元素，Jasmine就会因为识别不了这些元素而抛出错误。下面几个方法可以帮你快速解决：

方法1：添加CUSTOM_ELEMENTS_SCHEMA（最适合你的场景） #

因为你的需求只是验证组件创建完成，这个方法最简单直接——告诉Angular忽略所有未知的自定义元素和属性，不用做任何模拟。

只需要在测试模块的配置里加入CUSTOM_ELEMENTS_SCHEMA：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA] // 关键就是这一行
    }).compileComponents();
  });

  it('AppComponent should be created', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

这个方法的好处是不用写额外的模拟代码，完全满足你只测组件创建的需求；唯一的小缺点是如果之后你要测试组件和自定义元素的交互（比如输入输出），这个方法就不适用了，那时就得用下面的模拟方法。

方法2：模拟自定义元素组件 #

如果之后你需要测试组件和自定义元素的交互，或者不想用schema忽略检查，可以给每个自定义元素写一个空的模拟组件，让Angular识别它。

比如你的HTML里有<my-custom-widget>，就可以这么做：

import { Component } from '@angular/core';
import { AppComponent } from './app.component';

// 模拟自定义组件，只需要匹配选择器和空模板
@Component({
  selector: 'my-custom-widget',
  template: ''
})
class MockMyCustomWidgetComponent {}

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MockMyCustomWidgetComponent // 把模拟组件加入声明
      ]
    }).compileComponents();
  });

  it('AppComponent should be created', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

这样Angular就会把这个模拟组件当成真实的自定义元素，不会再报错了，之后你还可以给这个模拟组件加输入输出属性，用来测试组件和它的交互逻辑。

方法3：针对原生Web Components的处理 #

如果你的自定义元素是原生Web Components（不是Angular组件），除了上面的方法，你还可以在测试初始化时注册这些元素，或者用@angular/elements的相关配置，但如果只是要通过组件创建测试，前两种方法已经足够好用了。

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