Angular 12单元测试指令报错Can't bind to 'scrollIntoForm' 怎么解决？

问题根因 #

报错的核心原因有两个可能，优先级从高到低排序：

1. 属性指令使用写法错误：你给scrollIntoForm加了方括号，Angular会将其识别为输入绑定，但你的指令未定义同名的@Input属性，因此Angular认为你在给div绑定一个不存在的属性。
2. 测试文件的模块配置未正确注册指令，即使你声明了指令，也可能存在作用域配置错误。

修复方案 #

方案1：直接修正指令使用写法（推荐） #

去掉scrollIntoForm的方括号，属性指令本身不需要用方括号包裹，修改后的组件代码如下：

<div [formGroupName]="i" scrollIntoForm [index]="i"></div>

方案2：保留现有写法，给指令补充同名输入 #

如果你确实需要保留[scrollIntoForm]的绑定写法，可以给指令新增一个空的同名输入属性：

@Directive({
  selector: '[scrollIntoForm]',
})
export class ScrollIntoNewFormDirective implements OnChanges {
  // 新增这一行即可
  @Input() scrollIntoForm;

  constructor(private el: ElementRef) {}
  @Input() public index: number;
  // 剩余原有代码保持不变
}

检查测试配置 #

如果修改完上述代码仍然报错，确认你的测试文件的TestBed配置同时注册了组件和指令，参考配置如下：

import { ScrollIntoNewFormDirective } from './scroll-into-new-form.directive';
import { CreatedAclFormComponent } from './created-acl-form.component';

describe('CreatedAclFormComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        CreatedAclFormComponent,
        // 确保指令在这里声明，如果指令属于独立模块/共享模块，放到imports数组导入对应模块即可
        ScrollIntoNewFormDirective
      ]
    }).compileComponents();
  });
});

如果你的项目使用Angular14+的独立（standalone）指令，需要在测试组件的@Component.imports数组中加入ScrollIntoNewFormDirective，或者在TestBed的imports数组中加入该指令。

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