Angular 6测试报错：无法创建AddressLookUpDirective，未导入测试模块

哈哈，这个坑我之前也踩过！你遇到的问题根源很简单：AddressLookUpDirective是一个指令（Directive），不是组件（Component），但你却用了只能创建组件的TestBed.createComponent()方法来实例化它，这就导致了报错。

要正确测试Angular指令，我们需要先创建一个测试用的宿主组件，把指令应用到这个组件的模板上，再通过宿主组件来获取指令的实例。下面是修改后的完整测试代码：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { AddressLookUpDirective } from './address-look-up.directive';

// 定义一个测试用的宿主组件，用来挂载指令
@Component({
  template: `<div appAddressLookUp></div>` // 这里要和你指令的selector完全匹配
})
class TestHostComponent {}

describe('AddressLookUpDirective', () => {
  let fixture: ComponentFixture<TestHostComponent>;
  let directive: AddressLookUpDirective;

  beforeEach(() => {
    TestBed.configureTestingModule({
      // 同时声明测试宿主组件和目标指令
      declarations: [TestHostComponent, AddressLookUpDirective]
    });

    // 创建测试宿主组件的实例
    fixture = TestBed.createComponent(TestHostComponent);
    // 通过指令选择器找到挂载了指令的元素
    const directiveElement = fixture.debugElement.query(By.css('[appAddressLookUp]'));
    // 从元素的注入器中获取指令实例
    directive = directiveElement.injector.get(AddressLookUpDirective);
    // 触发变更检测
    fixture.detectChanges();
  });

  it('should create an instance', () => {
    expect(directive).toBeTruthy();
  });
});

还要注意几个关键细节：

• 替换appAddressLookUp为你AddressLookUpDirective类上@Directive装饰器里定义的真实selector（比如如果你的selector是[addressLookUp]，就改成<div addressLookUp></div>）
• 如果你的指令依赖了其他Angular服务，记得在TestBed.configureTestingModule()的providers数组中添加这些依赖
• 必须导入By类（import { By } from '@angular/platform-browser';），用来查询挂载了指令的DOM元素

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