Angular 5 Jasmine/Karma单元测试报错：Can't bind to 'fruits'

这个报错的原因很清晰：你的MyComponent1组件模板里肯定用到了<my-component2>组件，并且给它绑定了fruits输入属性（比如<my-component2 [fruits]="yourFruitsList"></my-component2>），但在单元测试的TestBed配置中，测试环境完全不知道MyComponent2的存在——既没有声明这个组件，也没有导入包含它的模块，所以Angular无法识别my-component2标签和它的fruits属性。

下面是两种针对性的解决办法：

方法1：直接在测试模块中声明MyComponent2 #

如果MyComponent2是独立组件，你可以直接在测试模块的declarations数组中添加它，同时别忘了导入该组件：

修改你的my-component1.component.spec.ts代码：

// 首先导入MyComponent2（根据实际文件路径调整）
import { MyComponent2Component } from '../my-component2/my-component2.component';

fdescribe('MyComponent1Component', () => {
 let component: MyComponent1Component;
 let fixture: ComponentFixture<MyComponent1Component>;

 beforeEach(async(() => {
 TestBed.configureTestingModule({
 declarations: [ 
   MyComponent1Component,
   MyComponent2Component // 添加上这个组件
 ],
 imports: [],
 providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
 })
 .compileComponents();
 }));

 // ... 其余代码保持不变
});

方法2：导入MyComponent2所在的模块 #

如果MyComponent2属于某个共享模块（比如FruitsModule），直接导入该模块到测试模块的imports数组中即可，模块内的所有声明组件都会被测试环境识别：

// 导入包含MyComponent2的模块（根据实际文件路径调整）
import { FruitsModule } from '../../modules/fruits.module';

fdescribe('MyComponent1Component', () => {
 let component: MyComponent1Component;
 let fixture: ComponentFixture<MyComponent1Component>;

 beforeEach(async(() => {
 TestBed.configureTestingModule({
 declarations: [ MyComponent1Component ],
 imports: [FruitsModule], // 添加上这个模块
 providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
 })
 .compileComponents();
 }));

 // ... 其余代码保持不变
});

额外提个小细节：你的测试代码里两个beforeEach都用了async()包裹，其实第一个配置模块的beforeEach用async()就足够了，第二个初始化组件的beforeEach可以去掉async()，不影响测试效果。

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