angular - Angular-fixture.debugElement.query（By.directive（IsRouteDirective）找不到宿主元素

问题描述

我正在为指令编写测试，但无法使用By.directive(IsRouteDirective). 控制台日志记录hostElement总是产生null.

在下面的代码中，LibRouteComponent它们LibTestComponent只是带有空模板的虚拟组件。

这是指令（短版）：

@Directive({
  selector: '[libIsRoute]'
})

export class IsRouteDirective implements OnInit { ... }

这是它的测试设置：

describe('IsRouteDirective', () => {

  let directive: IsRouteDirective;
  let fixture: ComponentFixture<LibTestComponent>;
  let hostElement;

  beforeEach(() => {

    fixture = TestBed.configureTestingModule({
      imports: [
        LibTestModule,
        RouterTestingModule.withRoutes([
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'foo'
          },
          {
            path: 'foo',
            component: LibRouteComponent
          },
          {
            path: 'bar',
            component: LibRouteComponent
          }
        ])
      ],
      declarations: [IsRouteDirective]
    })
    .overrideComponent(LibTestComponent, {
      set: {
        template: `
          <router-outlet></router-outlet>
          <div [libIsRoute]="['foo']"></div>
        `
      }
    })
    .createComponent(LibTestComponent);

    fixture.detectChanges();

    hostElement = fixture.debugElement.query(By.directive(IsRouteDirective));
    console.log(hostElement);
    directive = hostElement.injector.get(IsRouteDirective);

  });

  it('should be defined', () => {
    expect(hostElement).toBeTruthy();
  });
});

在日志中使用By.css('div')giveDebugElement{nativeNode: <div libisroute=""></div>....表明该元素存在并且在其上设置了指令选择器。

我正在做的正是官方文档在这里所做的。

为什么By.directive(IsRouteDirective)在我的情况下不起作用？

标签： angularunit-testingjasmineangular-directive

angular - Angular-fixture.debugElement.query（By.directive（IsRouteDirective）找不到宿主元素

问题描述

解决方案

推荐阅读