Error with testing formbuilder in angular

Question

I don't know why I get the error of "TypeError: Cannot read property 'form' of undefined " I've tried every way to understand this error, but I can't I tryng test new setup for spec.ts, but now return error "Cannot read property 'form' of undefined" :
spec.ts

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidationService } from 'src/app/core/services/custom-validation/custom-validation.service';
import { UserService } from 'src/app/core/services/user/user.service';
import {FormsModule} from '@angular/forms';
import { AccountComponent } from './account.component';

describe('AccountComponent', () => {
  let accountComponent: AccountComponent;
  let fb:FormBuilder;
  let customValidator: CustomValidationService;
  let userService: UserService;
  let fixture: ComponentFixture<AccountComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AccountComponent],
      imports: [FormBuilder, CustomValidationService, UserService],
      providers:[FormBuilder]
    }).compileComponents();
  }))
 
  it('',fakeAsync(()=>{
    const testForm={
      username:'test',
      email: '[email protected]'
    };
    accountComponent.form.controls['username'].setValue(testForm.username)

  }))
});

My component:

  form: FormGroup;
  formAlterPassword: FormGroup;  
  constructor(private fb: FormBuilder) { 
    this.form = this.fb.group({
      username: ['', Validators.required],
      email: ['', Validators.required]
    });
    this.formAlterPassword = this.fb.group({
      currentPassword: ['', Validators.required],
      password: ['', Validators.compose([Validators.required, Validators.minLength(12)])],
      confirmPassword: ['', Validators.compose([Validators.required, Validators.minLength(12)])]      
    })
  }```

David Kidwell · Accepted Answer · 2021-08-23 22:36:15Z

0

Your component relies on dependency injection to get an instance of FormBuilder, so you have to provide an instance to your test as well. Try something like this,

 let fixture: ComponentFixture<AccountComponent>;
 beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ReactiveFormsModule],
        schemas: [NO_ERRORS_SCHEMA]
    });
    fb = TestBed.inject<FormBuilder>(FormBuilder);
    fixture = TestBed.createComponent(AccountComponent);
    accountComponent = fixture.componentInstance;
    fixture.detectChanges();
});

Alternatively take a look at the answers here for some other ways you can provide the FormBuilder,

Angular2 FormBuilder unit testing

You also have to create an instance of the AccountComponent before you can access it's properties. I added that code to my original answer as well.

edited Aug 23, 2021 at 22:36

answered Aug 23, 2021 at 22:06

David Kidwell

7201 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Lucas Lima Over a year ago

In this example you put in the link, I've been following it and it's returned an error: TypeError: Cannot read property 'form' of undefined

David Kidwell Over a year ago

Can you add where/how you setup the provider to your code above?

Lucas Lima Over a year ago

I post a new setup

Lucas Lima Over a year ago

now error: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

David Kidwell Over a year ago

Remove FormBuilder from the imports in your code above

|

Collectives™ on Stack Overflow

Error with testing formbuilder in angular

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related