Mocking ReactiveFormsModule causes tests to fail

[ma7moudat]

Sumary:

After updating ng-mocks from 11.5.0 to 11.6.0 tests that were running normally fail now, all with the same error.

Angular v11.2.0

Reproduction:

import { Component } from '@angular/core'
import { FormControl, ReactiveFormsModule } from '@angular/forms'
import { TestBed } from '@angular/core/testing'
import { MockModule } from 'ng-mocks'

@Component({
    selector: 'app-reproduction',
    template: `
        <div>
            <input type="text" [formControl]="control" />
        </div>
    `,
})
class ReproductionComponent {
    control = new FormControl()
}

describe('Reproduction', () => {
    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [ReproductionComponent],
            imports: [MockModule(ReactiveFormsModule)],
        }).compileComponents()
    })

    it('shoud create', () => {
        const fixture = TestBed.createComponent(ReproductionComponent)
        const component = fixture.componentInstance
        fixture.detectChanges()

        expect(component).toBeTruthy()
    })
})

Result:

Upon running the test in reproduction above, the following error is thrown:

TypeError: Cannot set property 'form' of undefined

    at updateProp (C:\PROJECTS\packages\core\src\view\provider.ts:454:34)
    at checkAndUpdateDirectiveInline (C:\PROJECTS\packages\core\src\view\provider.ts:174:15)
    at checkAndUpdateNodeInline (C:\PROJECTS\packages\core\src\view\view.ts:442:14)
    at checkAndUpdateNode (C:\PROJECTS\packages\core\src\view\view.ts:402:12)
    at debugCheckAndUpdateNode (C:\PROJECTS\packages\core\src\view\services.ts:435:44)
    at debugCheckDirectivesFn (C:\PROJECTS\packages\core\src\view\services.ts:396:7)
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/ReproductionComponent.ngfactory.js:29:5)
    at Object.debugUpdateDirectives [as updateDirectives] (C:\PROJECTS\packages\core\src\view\services.ts:390:19)
    at checkAndUpdateView (C:\PROJECTS\packages\core\src\view\view.ts:372:12)
    at callViewAction (C:\PROJECTS\packages\core\src\view\view.ts:628:11)
    at execComponentViewsAction (C:\PROJECTS\packages\core\src\view\view.ts:572:7)
    at checkAndUpdateView (C:\PROJECTS\packages\core\src\view\view.ts:383:3)
    at callWithDebugContext (C:\PROJECTS\packages\core\src\view\services.ts:641:23)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (C:\PROJECTS\packages\core\src\view\services.ts:351:10)
    at ViewRef_.Object.<anonymous>.ViewRef_.detectChanges (C:\PROJECTS\packages\core\src\view\refs.ts:283:16)
    at ComponentFixture.Object.<anonymous>.ComponentFixture._tick (C:\PROJECTS\packages\core\testing\src\component_fixture.ts:113:28)
    at C:\PROJECTS\packages\core\testing\src\component_fixture.ts:127:14
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:407:30)
    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:3765:43)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:406:56)
    at Object.onInvoke (C:\PROJECTS\packages\core\src\zone\ng_zone.ts:364:29)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:406:56)
    at Zone.Object.<anonymous>.Zone.run (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:167:47)
    at NgZone.Object.<anonymous>.NgZone.run (C:\PROJECTS\packages\core\src\zone\ng_zone.ts:184:50)
    at ComponentFixture.Object.<anonymous>.ComponentFixture.detectChanges (C:\PROJECTS\packages\core\testing\src\component_fixture.ts:126:19)
    at C:\PROJECTS\PROJECT\src\app\shared\components\autosuggest\reproduction.component.spec.ts:29:17
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:407:30)
    at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:3765:43)
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:406:56)
    at Zone.Object.<anonymous>.Zone.run (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:167:47)
    at Object.wrappedFunc (C:\PROJECTS\PROJECT\node_modules\zone.js\bundles\zone-testing-bundle.umd.js:4250:34)
    at Object.asyncJestTest (C:\PROJECTS\PROJECT\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:106:37)
    at C:\PROJECTS\PROJECT\node_modules\jest-jasmine2\build\queueRunner.js:45:12
    at new Promise (<anonymous>)
    at mapper (C:\PROJECTS\PROJECT\node_modules\jest-jasmine2\build\queueRunner.js:28:19)
    at C:\PROJECTS\PROJECT\node_modules\jest-jasmine2\build\queueRunner.js:75:41
    at processTicksAndRejections (node:internal/process/task_queues:93:5)

Findings:

• The test finishes successfully only when I change MockModule(ReactiveFormsModule) to ReactiveFormsModule in the imports or when I remove [formControl]=control from the template.
• No other usages of MockModule seem to cause the problem. / Just found out that mocking other modules that have something to do with form elements (e.g. MatInputModule or MatInputCheckbox from @angular/material) also causes the problem.

[satanTime]

Hi, thanks for the report.

The fix will be released on the weekend.

[ma7moudat]

Hi, thanks for the report.

The fix will be released on the weekend.

@satanTime nah, thank you for awesome library and the quick reply :D

[satanTime]

Hi @ma7moudat,

could you verify that the fixed version works for you?

ng-mocks.zip

[ma7moudat]

Hi @satanTime,
works like a charm :)

[satanTime]

v11.7.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.