Это мой директивный файл спецификации. Я использую угловой 6.

import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; import { TestBed, ComponentFixture, async } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { KeyboardInputDirective } from './keyboard-input.directive'; @Component({ selector: 'kiosk-app-test-component', template: `{amp}lt;input type="text" name="wu-input" class="wu-input" id="standard" [kioskAppKeyboardInput]="'true'"{amp}gt;` }) class TestStubComponent { } describe('Directive: KeyboardInputDirective', () ={amp}gt; { let component: TestStubComponent; let fixture: ComponentFixture{amp}lt;TestStubComponent{amp}gt;; let directiveEl: DebugElement; beforeEach(async(() ={amp}gt; { TestBed.configureTestingModule({ declarations: [TestStubComponent, KeyboardInputDirective], schemas: [NO_ERRORS_SCHEMA] }); TestBed.compileComponents().then(() ={amp}gt; { fixture = TestBed.createComponent(TestStubComponent); component = fixture.componentInstance; directiveEl = fixture.debugElement.query(By.directive(KeyboardInputDirective)); }); })); fit('should create an instance', () ={amp}gt; { fixture.detectChanges(); expect(directiveEl).not.toBeNull(); }); }); 

Я постоянно получаю ошибку ниже.

 TypeError: Cannot read property 'query' of null 

Если я fixture.debugElement значение fixture.debugElement оно всегда равно нулю. Любая помощь очень ценится.

package.json

 { "name": "project-name-xyz", "private": true, "scripts": { "ng": "$(npm bin)/ng", "start:web": "$(npm bin)/ng serve web", "tsc": "tsc", "tsc:w": "tsc -w" }, "dependencies": { "@angular/animations": "^6.0.3", "@angular/common": "^6.0.3", "@angular/compiler": "^6.0.3", "@angular/core": "^6.0.3", "@angular/forms": "^6.0.3", "@angular/http": "^6.0.3", "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", "@angular/upgrade": "^6.0.4", "@ngrx/effects": "^7.2.0", "@ngrx/entity": "^7.2.0", "@ngrx/store": "^6.1.0", "@ngrx/store-devtools": "^7.2.0", "@ngx-translate/core": "^10.0.2", "@types/angular": "^1.6.45", "angular": "^1.6.9", "angular4-translate": "^1.3.5", "async": "^2.6.1", "child-process-promise": "^2.2.1", "classlist.js": "^1.1.20150312", "core-js": "^2.5.4", "fetch-intercept": "^2.3.0", "fingerprintjs2": "1.1.0", "fs-extra": "^7.0.0", "google-libphonenumber": "3.2.6", "gulp": "^3.9.1", "gulp-remove-code": "^3.0.4", "gulp-rename": "^1.4.0", "gulp-replace": "^1.0.0", "husky": "^3.0.5", "jquery": "^3.3.1", "lodash": "^4.17.10", "moment": "^2.22.2", "ngrx-store-localstorage": "^5.1.0", "ngx-bootstrap": "^3.3.0", "ngx-cookie-service": "^1.0.10", "ngx-logger": "^3.3.12", "ngx-mask": "^6.1.3", "ngx-page-scroll-core": "^6.0.2", "ngx-popper": "^5.1.7", "popper.js": "^1.14.4", "protractor-axe-report-plugin": "^1.1.0", "run-sequence": "^2.2.1", "rxjs": "6.0.0", "rxjs-compat": "^6.2.2", "save": "^2.3.2", "systemjs": "^0.21.4", "systemjs-plugin-babel": "0.0.25", "virtual-keyboard": "^1.28.4", "web-animations-js": "^2.3.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "^0.13.1", "@angular/cli": "~6.0.8", "@angular/compiler-cli": "^7.2.10", "@angular/language-service": "^6.0.3", "@ngrx/schematics": "^7.2.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/lodash": "^4.14.118", "@types/node": "~8.9.4", "chalk": "^2.4.2", "codelyzer": "~4.2.1", "fancy-log": "^1.3.3", "gulp-clean": "^0.4.0", "gulp-i18n-lint": "^0.1.1", "gulp-tap": "^1.0.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "^3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "karma-typescript": "^4.0.0", "protractor": "^5.4.0", "sonarqube-scanner": "^2.4.1", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~3.1.1" } } 

возможно, вам нужно переместить fixture.detectChanges (); внутри вашего описания следующим образом.

 describe('Directive: KeyboardInputDirective', () ={amp}gt; { let component: TestStubComponent; let fixture: ComponentFixture{amp}lt;TestStubComponent{amp}gt;; let directiveEl: DebugElement; beforeEach(async(() ={amp}gt; { TestBed.configureTestingModule({ declarations: [TestStubComponent, KeyboardInputDirective], schemas: [NO_ERRORS_SCHEMA] }); TestBed.compileComponents().then(() ={amp}gt; { fixture = TestBed.createComponent(TestStubComponent); component = fixture.componentInstance; fixture.detectChanges(); directiveEl = fixture.debugElement.query(By.directive(KeyboardInputDirective)); }); })); 

Надеюсь, это поможет, дайте мне знать, если вы столкнулись с проблемой.

TestBed.compileComponents в этом случае не требуется, но необходимо fixture.detectChanges перед запросом элемента HTML . Вы можете обратиться (запросить) к элементу input напрямую и взаимодействовать с ним в своем тесте, чтобы увидеть, работает ли директива правильно. Не зная, что в действительности делает ваша директива, очевидно, что приведенный ниже тест необходимо адаптировать, чтобы он работал на вас.

 describe('Directive: KeyboardInputDirective', () ={amp}gt; { let component: TestStubComponent; let fixture: ComponentFixture{amp}lt;TestStubComponent{amp}gt;; let inputElement: HTMLInputElement; beforeEach(() ={amp}gt; { TestBed.configureTestingModule({ declarations: [TestStubComponent, KeyboardInputDirective] }); fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); component = fixture.componentInstance; inputElement = {amp}lt;HTMLInputElement{amp}gt;fixture.debugElement.nativeElement.querySelector('INPUT'); }); ... it('#keydown should ...', fakeAsync(() ={amp}gt; { // given spyOn(inputElement, 'setSelectionRange'); inputElement.value = 'abc'; const event = new KeyboardEvent('keydown', { key: '' }); // when inputElement.dispatchEvent(event); tick(); // then expect(inputElement.setSelectionRange).toHaveBeenCalledWith(0, 3); }));