Karma formGroup expects a FormGroup instance. Please pass one in

Question

I understand the root of the error, the component I'm testing requires a FormGroup to be passed into it's @Input() form: FormGroup. I just can't figure out how to pass one in when testing this component.

There error occurs in my before each function when I call fixture.detectChanges() so the form must be passed in before that point

my current code get's the error group is not defined:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {
    ReactiveFormsModule,
    FormsModule,
    Validators,
    FormBuilder
} from '@angular/forms';
import { StaticComponent } from '../../firewall/static/static.component';

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

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                declarations: [
                    StaticComponent
                ],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    FormsModule
                ],
                providers: [
                    NetworkService,
                    NetworkValidator,
                    HostNameValidator,
                    NotificationsService
                ]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(StaticComponent);
        component = fixture.componentInstance;
        component.ruleForm = FormBuilder.group({
            chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required,
                this.networkValidator.validateNetwork('ip')
            ],
            action: ['action', Validators.required]
        });
        fixture.detectChanges();
    });

    fit('should be created', () => {
        expect(component).toBeTruthy();
    });
});

How do I pass in a pre-fab form to my @Input of the component during the test? I cant seem to provide FormBuilder correctly

`form` is a public property on the component. Set it to an empty, or prebuilt, `FormGroup` in the unit test. Should work. — R. Richards, Feb 07 '18 at 18:04
right, I tried doing component.form = FormGroup.group({...}) and I get error group is not a property. I import it but it's not injecting correctly — FussinHussin, Feb 07 '18 at 18:26
sorry i was cutting it down to be more straightforward, there it is — FussinHussin, Feb 07 '18 at 18:40

score 27 · Accepted Answer · answered Feb 07 '18 at 19:09

This is a test component spec that I came up with for you. Notice the mocked FormBuilder that I have added and the way that I have provided it in the spec.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestingComponent } from './testing.component';
import { FormBuilder, Validators } from '@angular/forms';

describe('TestingComponent', () => {
  let component: TestingComponent;
  let fixture: ComponentFixture<TestingComponent>;
  const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestingComponent ],
      providers: [ { provide: FormBuilder, useValue: formBuilder } ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestingComponent);
    component = fixture.componentInstance;
    component.ruleForm = formBuilder.group({
      chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required
            ],
            action: ['action', Validators.required]
    });
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

This is my test component in case you need to refer to that.

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

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
  ruleForm: FormGroup = new FormGroup({});
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.ruleForm = this.formBuilder.group({
      chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required
            ],
            action: ['action', Validators.required]
    });
  }
}

hmmm. im getting syntax error ' Cannot find name 'formBuilder' ' in the useValue section — FussinHussin, Feb 07 '18 at 19:13
Did you add `const formBuilder: FormBuilder = new FormBuilder();` toward the top of the spec, like I did? — R. Richards, Feb 07 '18 at 19:14
That did it! thanks! I'm getting an error providing my custom validator service, but that is a separate question — FussinHussin, Feb 07 '18 at 19:22
maybe an upvote? I couldnt find help on providing the formBuilder anywhere else here or in the docs — FussinHussin, Feb 07 '18 at 19:25
https://stackoverflow.com/questions/45722256/how-do-i-debug-a-object-errorevent-thrown-error-in-my-karma-jasmine-tests — R. Richards, Feb 07 '18 at 19:34
yeah I have sm set false, i'm following the github issue. I can't figure it out, thanks though — FussinHussin, Feb 07 '18 at 19:37

score 1 · Answer 2 · answered Aug 07 '18 at 17:08

I ran into the same error after running detectChanges. My component's FormGroup, however, was initiated in ngOnInit, not passed as an input.

The solution for my case was wrapping the component under test in a wrapper component. This process will force Angular to put the component under test through the lifecycle events e.g. ngOnInit that you would otherwise have to invoke yourself. It also feels like the right way to test a component with inputs. It's a little more boilerplate, but this method mimics angular's natural behavior more closely.

Here is a reproduction of code from this Medium article

  describe('ComponentUnderTestComponent', () => {
    let testHostComponent: TestHostComponent;
    let testHostFixture: ComponentFixture<TestHostComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ComponentUnderTestComponent, TestHostComponent]
    }).compileComponents();
    }));

    beforeEach(() => {
    testHostFixture = TestBed.createComponent(TestHostComponent);
    testHostComponent = testHostFixture.componentInstance;
    testHostFixture.detectChanges();
  });

  it('should show TEST INPUT', () => {
     expect(testHostFixture.nativeElement.querySelector('div').innerText)
         .toEqual('TEST INPUT');
  });

  @Component({
    selector: `host-component`,
    template: `<component-under-test input="test input"></component-under-test>`
  })
  class TestHostComponent {
  }
});

Karma formGroup expects a FormGroup instance. Please pass one in

2 Answers2