Cannot read properties of undefined (reading 'value') on a Jest Snapshot test

I am testing a component in my Angular v15 app. So far only one test fails, my snapshot test:

describe('Snapshot', () => {
it('basic', waitForAsync(() => {
fixture.detectChanges();

expect(fixture).toMatchSnapshot();
}));
});


Every other test passes. The error I get is this:

TypeError: Cannot read properties of undefined (reading 'value')

at <ComponentName>_Template (ng:/<ComponentName>.js:360:65)
at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:10441:9)
at refreshView (node_modules/@angular/core/fesm2020/core.mjs:10326:13)
at refreshComponent (node_modules/@angular/core/fesm2020/core.mjs:11385:13)
at refreshChildComponents (node_modules/@angular/core/fesm2020/core.mjs:10116:9)
at refreshView (node_modules/@angular/core/fesm2020/core.mjs:10376:13)
at detectChangesInternal (node_modules/@angular/core/fesm2020/core.mjs:11529:9)
at RootViewRef.detectChanges (node_modules/@angular/core/fesm2020/core.mjs:12020:9)
at ComponentFixture._tick (node_modules/@angular/core/fesm2020/testing.mjs:126:32)
at node_modules/@angular/core/fesm2020/testing.mjs:139:22
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:127:47)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:123:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:24210:33)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone-node.js:160:47)
at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:24064:28)
at ComponentFixture.detectChanges (node_modules/@angular/core/fesm2020/testing.mjs:138:25)
at src/modules/action-template/media-type-form/<ComponentName>/<ComponentName>.component.spec.ts:685:15
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:127:47)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:123:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.runGuarded (node_modules/zone.js/dist/zone-node.js:171:51)
at runInTestZone (node_modules/zone.js/dist/async-test.js:272:33)
at node_modules/zone.js/dist/async-test.js:223:21
at new ZoneAwarePromise (node_modules/zone.js/dist/zone-node.js:1270:25)
at node_modules/zone.js/dist/async-test.js:222:24
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:126:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone-node.js:160:47)
at Object.<anonymous> (node_modules/jest-zone-patch/index.js:50:27)


The HTML uses a formGroup with the form being named form so it can be referenced with this.form.value.<formControlName>.

As the error log is very undescriptive, I am unsure of where to look for remediation. The page works perfectly, no errors. Just the tests fail.

HTML excerpt:

<CompanyCustomTextInput label-position="above">
<label slot="label" for="title-input">{{'TITLE' | translate}}</label>
<input
slot="input"
type="text"
class="text-input"
id="title-input"
placeholder="{{'TITLE_PLACEHOLDER' | translate}}"
formControlName="title"
[maxlength]="maxLengthTitle"
/>
</CompanyCustomTextInput>


There are more inputs of different and of the same type, but they all follow this type of pattern.

I have tried to remove all the this.form.value from inputs, tried changing formControlName. No luck.

Continue reading...