Angular 5中Karma运行Jasmine测试遇sortKey属性绑定错误

老哥，我太懂你这种明明没针对sortKey写测试，却被它报错搞懵的心情了！其实这个问题的根源不是你没测它，而是测试环境下Angular不认识模板里的sortColumn指令——sortKey是这个自定义指令的输入属性，不是<th>原生就有的属性，所以当TestBed编译组件模板时，找不到对应的指令定义，就会把sortKey当成原生th的属性来报错。

下面给你具体的解决步骤：

1. 定位sortColumn指令的归属 #

先找到你项目里定义sortColumn指令的地方，它可能在某个共享模块（比如SharedModule）里，或者是一个单独的SortModule，也可能是和当前组件同属一个模块里的声明。

2. 在测试配置中导入对应模块/声明指令 #

打开你的组件.spec.ts文件，在TestBed.configureTestingModule的配置里，把包含sortColumn指令的模块加进imports数组，或者直接把指令本身加进declarations数组。

举个例子：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { YourComponent } from './your.component';
// 导入包含sortColumn指令的模块，或者直接导入指令
import { SharedModule } from '../shared/shared.module';
// 或者 import { SortColumnDirective } from '../directives/sort-column.directive';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ YourComponent ],
      // 这里导入对应模块
      imports: [ SharedModule ]
      // 或者如果是单独声明指令的话：
      // declarations: [ YourComponent, SortColumnDirective ]
    })
    .compileComponents();
  });

  // ... 你的测试代码
});

为什么没测试sortKey还是会报错？ #

因为Angular在运行组件测试时，会完整编译组件的模板，不管你有没有写针对某个模板元素的测试用例。模板里的所有指令、绑定都必须被TestBed识别，否则就会抛出模板解析错误——哪怕你压根没打算测这个排序功能，只要模板里有，就必须让测试环境知道它的存在。

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