Jestjs 指令单元测试失败

我正在使用

jest.js

对angular应用程序进行测试。以下是我在html中使用的指令：

<textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5"
                                placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea>

这样写是为了显示输入字段周围的错误边界。我正试着这样测试：

import { ErrorHighlighterDirective } from './error-highlighter.directive';
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2, Component, DebugElement } from '@angular/core';
import { NgControl, FormGroup, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
import { TestBed, ComponentFixture } from '@angular/core/testing';

@Component({
    template: `<input errorHighlighter formControlName="Url" type="text">`
})
class TestHighlighterComponent { }



describe('ErrorHighlighterDirective', () => {

    let component: TestHighlighterComponent;
    let fixture: ComponentFixture<TestHighlighterComponent>;
    let inputEl: DebugElement;

    const fg: FormGroup = new FormGroup({
        'Url': new FormControl('')
    });

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHighlighterComponent, ErrorHighlighterDirective],
            imports: [FormsModule, ReactiveFormsModule],
            providers: [
                { provide: NgControl, useValue: fg }
            ]
        });
        fixture = TestBed.createComponent(TestHighlighterComponent);
        component = fixture.componentInstance;
        inputEl = fixture.debugElement.query(By.css('input'));
    });


    it('should create an instance', () => {
        const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
        expect(directive).toBeTruthy();
    });

});

有谁能帮助我理解并解决这些问题？我也不太熟悉角度测试jest.js

您可以使用By.directive e、 g

您需要通过从angular.platform-browser导入

从“@angular/platform browser”导入{By}

你可以进一步阅读

您可以使用任何可以与css一起使用的选择器By.css。类的选择器就是.classname。 e、 g

或

或

---

这里是“new ErrorHighlighterDirective（）；”需要发送3个参数，怎么做？我的“立即尝试”工作您不需要使用关键字“新建”。您可以尝试const directiveEl=fixture.debugElement.query（By.directive（MyDirective））；expect（directiveEl）.not.toBeNull（）；

import { ErrorHighlighterDirective } from './error-highlighter.directive';
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2, Component, DebugElement } from '@angular/core';
import { NgControl, FormGroup, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
import { TestBed, ComponentFixture } from '@angular/core/testing';

@Component({
    template: `<input errorHighlighter formControlName="Url" type="text">`
})
class TestHighlighterComponent { }



describe('ErrorHighlighterDirective', () => {

    let component: TestHighlighterComponent;
    let fixture: ComponentFixture<TestHighlighterComponent>;
    let inputEl: DebugElement;

    const fg: FormGroup = new FormGroup({
        'Url': new FormControl('')
    });

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHighlighterComponent, ErrorHighlighterDirective],
            imports: [FormsModule, ReactiveFormsModule],
            providers: [
                { provide: NgControl, useValue: fg }
            ]
        });
        fixture = TestBed.createComponent(TestHighlighterComponent);
        component = fixture.componentInstance;
        inputEl = fixture.debugElement.query(By.css('input'));
    });


    it('should create an instance', () => {
        const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
        expect(directive).toBeTruthy();
    });

});

● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/app/directives/error-highlighter.directive.spec.ts:33:46 - error TS2304: Cannot find name 'By'.

    33         inputEl = fixture.debugElement.query(By.css('input'));
                                                    ~~
    src/app/directives/error-highlighter.directive.spec.ts:38:66 - error TS2345: Argument of type 'FormGroup' is not assignable to parameter of type 'NgControl'.
      Type 'FormGroup' is missing the following properties from type 'NgControl': name, valueAccessor, viewToModelUpdate, control, path

    38         const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);

const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
expect(directiveEl).not.toBeNull();

By.css(.classname)

By.css('input[type=radio]')

By.css('textarea')