Angular单元测试已声明Stub组件仍报NG0304未知元素错误

1. 确认Stub组件的Selector与模板标签完全匹配 #

• 检查Stub组件的@Component装饰器中selector属性，必须和模板中使用的标签完全一致（包括大小写、连字符、拼写）。
  示例：
  如果模板中是<app-app-form>，Stub组件的selector必须是：

  @Component({
    selector: 'app-app-form', // 必须和模板标签完全匹配
    template: ''
  })
  export class AppFormStubComponent {}
  

• 注意：Angular的selector对大小写敏感，不要出现app-App-Form和<app-app-form>不匹配的情况。

2. 确保TestBed配置正确加载Stub组件 #

• 确认在TestBed.configureTestingModule的declarations数组中，正确添加了所有Stub组件，没有遗漏或拼写错误。
  示例：

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        ParentComponent,
        AppFormStubComponent,
        TermsFormStubComponent // 确保所有用到的Stub都在这里
      ],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents(); // 必要时调用，确保模板编译完成
  });
  

• 如果使用Angular CLI，compileComponents()通常可以省略，但如果测试中出现模板加载问题，手动调用能确保Stub组件被正确编译识别。

3. 排查NO_ERRORS_SCHEMA是否生效 #

• NO_ERRORS_SCHEMA的作用是忽略模板中的未知元素和属性，但如果已经声明了Stub组件，这个schema应该不会触发警告——除非Stub的selector不匹配。
• 如果你不需要依赖Stub组件的逻辑（只是想让模板通过编译），可以尝试移除Stub组件，只保留NO_ERRORS_SCHEMA，但这样@ViewChild获取到的子组件实例会是undefined，需要在测试中手动mock。

4. 检查组件模板中的子组件标签是否有误 #

• 直接搜索模板中的子组件标签，比如<app-app-form>，确认没有拼写错误（比如多写/少写连字符、单词拼写错误）。
• 避免在模板中使用动态组件加载或未正确声明的组件标签。

5. 清理测试缓存（极端情况） #

• 如果以上步骤都没问题，但警告依然存在，可能是Angular测试缓存导致的。可以尝试：
  • 运行测试时添加--no-cache参数：ng test --no-cache
  • 手动删除node_modules/.cache目录（如果存在）

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