Блог

Итак, я пытаюсь написать действительно базовый тест для компонента. Я просто хочу убедиться, что форма, которую я создаю с помощью FormBuilder, является экземпляром FormGroup , но я постоянно получаю NullInjectorerror: нет поставщика для FormBuilder, и я перепробовал почти все. Я убедился, что импортирую ReactiveFormsModule.

часы работы-calculator.component.ts

 import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-hours-calculator',
  templateUrl: './hours-calculator.component.html',
  styleUrls: ['./hours-calculator.component.scss']
})
export class HoursCalculatorComponent implements OnInit {

  constructor(private formBuilder: FormBuilder) { }

  form: FormGroup;
  
  ngOnInit() {
      this.form = this.formBuilder.group({
         control1: this.formBuilder.control('')
      });
  }
}  

часы работы-calculator.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormGroup, ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
import { HoursCalculatorComponent } from './hours-calculator.component';

describe('HoursCalculatorComponent', () => {
  let component: HoursCalculatorComponent;
  let fixture: ComponentFixture<HoursCalculatorComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule
      ],
      declarations: [ HoursCalculatorComponent ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture =   TestBed.createComponent(HoursCalculatorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create a form using formbuilder', () => {
    expect(component.form instanceof FormGroup).toBeTruthy();
  });
}  

Я просто упускаю что-то чрезвычайно очевидное? Я действительно рву на себе волосы из-за этого. Я действительно новичок в модульном тестировании компонентов angular, поэтому объясните мне это так, как будто мне 5 лет 🙂 Для справки, я использую angular 7.

Полное сообщение об ошибке:

           StaticInjectorError(Platform: core)[HoursCalculatorComponent -> FormBuilder]: 
            NullInjectorError: No provider for FormBuilder!
            at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3228:1)
            at resolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3473:1)
            at tryResolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3417:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3314:1)
            at resolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3473:1)
            at tryResolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3417:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3314:1)
            at resolveNgModuleDep (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:19784:1)
            at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20473:1)
            at resolveDep (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20844:1)
  

package.json

     {
      "name": "babysitter-app",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "core-js": "^2.5.4",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.11.0",
        "@angular/cli": "~7.1.3",
        "@angular/compiler-cli": "~7.1.0",
        "@angular/language-service": "~7.1.0",
        "@types/node": "~8.9.4",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.1.6"
      }
    }
  

Откройте app.component.spec.ts и добавьте ReactiveFormsModule в массив импорта.

app.component.spec.ts

 describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule <================================= add this
      ],
      declarations: [
        AppComponent,
        HoursCalculatorComponent
      ],
    }).compileComponents();
  }));
  

При ngModule необходимости импортировать formModule

   imports: [ 
      FormsModule,
      ReactiveFormsModule,
  ],
  

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

   beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
          ReactiveFormsModule,
          FormsModule,
      ],
      declarations: [ HoursCalculatorComponent ]
    }).compileComponents();
  }));
  

В последней версии Angular я все еще сталкивался с этой проблемой даже после импорта ReactiveFormsModule на странице формы, если только я не импортировал то же самое ReactiveFormsModule в основной app.module.ts файл.

В NgModule необходимо импортировать ReactiveFormsModule из @angular/forms:

 import { ReactiveFormsModule } from '@angular/forms';
  

И добавьте ReactiveFormsModule в разделе импорт:

 imports: [ReactiveFormsModule]
  

У меня была похожая ошибка, и мне пришлось импортировать FormsModule перед ReactiveFormsModule. Я делал наоборот, что вызвало ошибку, так что следите за этим