Angular 错误类型错误&；角度单元测试中的错误上下文DebugContext\模板产生错误

我的指令有以下测试。看起来是这样的：

import {Component} from '@angular/core';
import {FormsModule, FormBuilder, ReactiveFormsModule} from '@angular/forms';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {TrimInputDirective} from './trim-input.directive';

/**
 * Test Component for Trim
 */
@Component({
  selector: 'my-directive-test-component',
  template: `<form [formGroup]="testResultForm">
                    <input type="text" class="trim-me" formControlName="TrimMe" name="TrimMe">
                      <input type="text" class="msa-trim-ignore" formControlName="TrimIgnore" name="TrimIgnore">
                        <input type="password" formControlName="TrimPassword" name="TrimPassword">
                  </form>`
})
class TestComponent {
  public testResultForm: any;
}


fdescribe('Trim Directive', () => {
  let fixture: ComponentFixture<TestComponent>;
  let component: TestComponent;
  let inputDebugElementTrim: any;
  let inputDebugElementNoTrim: any;
  let inputDebugElementPassword: any;
  const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        TrimInputDirective
      ],
      imports: [FormsModule, ReactiveFormsModule],
      providers: [{ provide: FormBuilder, useValue: formBuilder }]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      component.testResultForm = formBuilder.group({
        TrimMe: ['     1234.56     '],
        TrimIgnore: ['     1234.56     '],
        TrimPassword: ['     1234.56     ']
      });
      inputDebugElementTrim = fixture.debugElement.query(By.css('.trim-me')).nativeElement;
      inputDebugElementNoTrim = fixture.debugElement.query(By.css('.msa-trim-ignore')).nativeElement;
      inputDebugElementPassword = fixture.debugElement.query(By.css('input[type=password]')).nativeElement;
    });
  }));

  it('should trim the input', () => {
    inputDebugElementTrim.dispatchEvent(new Event('blur'));
    fixture.detectChanges();
    expect(inputDebugElementTrim.value).toBe('1234.56');
  });

  it('should not trim the input due to ignore class', () => {
    inputDebugElementNoTrim.dispatchEvent(new Event('blur'));
    fixture.detectChanges();
    expect(inputDebugElementNoTrim.value).toBe('     1234.56     ');
  });

  it('should not trim the input due to password input', () => {
    inputDebugElementPassword.dispatchEvent(new Event('blur'));
    fixture.detectChanges();
    expect(inputDebugElementPassword.value).toBe('     1234.56     ');
  });
});

我肯定我已经进口/提供了我应该进口的一切。不幸的是，控制台错误并不能真正帮助我确定为什么我会有这个错误

---

提前感谢您的建议。

我不知道您是怎么看的，但chrome给了我以下错误：

VM4549 TestComponent.ngfactory.js:25错误类型错误：此.\u未触及 这不是一个函数

您必须通过调用

fixture.detectChanges（）

告诉测试床执行数据绑定。只有当您的

\u打开时

功能才会注册

beforeEach(() => {
  fixture.detectChanges();
});

it('should trim the input', () => {
  ...
});
...

---

添加fixture.detectChanges（）；工作正常，但是控制台没有/没有给我与您看到的相同的错误。无论如何，谢谢！

beforeEach(() => {
  fixture.detectChanges();
});

it('should trim the input', () => {
  ...
});
...

you could try by importing  ComponentFixtureAutoDetect for auto detection change -

import { ComponentFixtureAutoDetect } from '@angular/core/testing'

then you can use it in provider - 

TestBed.configureTestingModule({
  declarations: [ BannerComponent ],
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
});

By this you don't need to call fixture.detectchanges() every time