Bug: .keep(ReactiveFormsModule) does not actually keep

[JPtenBerge]

Hello there!

Description of the bug

During testing, I'm trying to keep the ReactiveFormsModule from being mocked using .keep(), but it very much seems to be mocked and then causing errors because it's a seemingly shallow mock.

An example of the bug

I have this component where I'm initializing a reactive form in the ngOnInit():

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  form!: FormGroup<AddPersonForm>;

  constructor(private fb: NonNullableFormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group<AddPersonForm>({
      name: this.fb.control(''),
      age: this.fb.control(21),
    });
  }
}

I'm trying to test it, where I actually want to keep the ReactiveFormsModule untouched, it should just work as in production:

describe('AppComponent', () => {
  let sut: AppComponent;

  beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule));

  it('should initialize the form without errors', () => {
    sut = MockRender(AppComponent).componentInstance;
    sut.ngOnInit();
  });
});

But when running the test, it doesn't seem to keep that module as I intend:

TypeError: this.fb.control is not a function

If I console.log(this.fb); in my AppComponent, I see a mock:

NonNullableFormBuilder
   __ngMocks: true
   [[Prototype]]: Object

Link: https://github.com/JPtenBerge/ng-mocks-reactive-forms-bug

Expected vs actual behavior

Expected: all form functions (fb.group(), fb.control()) to work as when serving the app.
Actual: it's a mock without any of the functions.

[felixdenis]

I have encountered the same problem.
@JPtenBerge Try explicitly keeping NonNullableFormBuilder in addition to ReactiveFormsModule.

[felixdenis]

I believe FormBuilder and its variants are not provided by FormsModule or ReactiveFormsModule. Hence this is not a bug in ng-mocks.

[JPtenBerge]

I have encountered the same problem. @JPtenBerge Try explicitly keeping NonNullableFormBuilder in addition to ReactiveFormsModule.

Have tried this in various ways:

beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule).keep(NonNullableFormBuilder));
beforeEach(() => MockBuilder(AppComponent).keep(NonNullableFormBuilder));

Haven't found anything that works.

I believe FormBuilder and its variants are not provided by FormsModule or ReactiveFormsModule. Hence this is not a bug in ng-mocks.

Hey, whadda know, I thought naaah when I read this, but I've removed the module from my AppComponent's imports array and serving the application actually still works. Well that's a surprise. Doesn't fix my problem, but still, interesting to know.

[Dji75]

Have you tried the following ?

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.nonNullable.group<AddPersonForm>({
      name: this.fb.nonNullable.control(''),
      age: this.fb.nonNullable.control(21),

beforeEach(() => MockBuilder(AppComponent).keep(ReactiveFormsModule)); // nothing more