Angular单元测试绑定sortableData报未知属性错误如何解决

这个报错的本质是Angular模板编译阶段，在tbody元素上找不到sortableData对应的可绑定属性，触发原因通常是对应指令/模块未正确导入，或是指令挂载写法有误，对应处理方式如下：

• 若你使用的是ngx-sortablejs（Angular生态最常用的sortablejs封装库）
  • 业务模块中需要正确导入SortablejsModule：根模块导入时调用SortablejsModule.forRoot({ /* 全局排序配置 */ })，子特性模块直接导入SortablejsModule即可
  • 单元测试场景需特别注意：测试模块的编译上下文完全独立于业务模块，必须在TestBed.configureTestingModule的imports数组中单独加入SortablejsModule，仅在业务模块导入无法让测试用例识别到第三方指令
  • 核对模板写法：该库的排序指令选择器是[sortable]，必须先把指令挂载到元素上才能使用对应的输入属性，正确模板代码如下：

    <tbody sortable [sortableData]="myData">...</tbody>
    

    漏写sortable属性是触发该报错的高频原因，这种情况和模块导入无关，补全指令属性即可解决。
• 若你使用的是自定义开发的排序指令
  • 检查自定义指令是否已经加入当前模块的declarations声明数组；如果指令定义在共享模块中，需要确认共享模块已经在exports数组中导出该指令，再被当前使用的模块导入
  • 核对指令内部定义的输入属性名是否完全为sortableData，避免出现大小写错误、驼峰/连字符写法不匹配的拼写问题

单元测试的正确配置参考：

import { SortablejsModule } from 'ngx-sortablejs';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [当前测试的表格组件],
    imports: [
      // 其他依赖的模块
      SortablejsModule
    ]
  }).compileComponents();
});

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