DontTalkToMeAboutJS
DontTalkToMeAboutJS

Reputation: 1

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();
    }));
  });

Test Fixture:

beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        CommonModule,
        <ComponentName>StyleModule,
        FormsModule,
        LabelModule,
        ReactiveFormsModule,
        TranslateModule.forRoot({}),
        ValidationErrorsModule
      ],
      declarations: [
        <ComponentName>FormComponent,
        <ComponentName>FormComponent,
        <ComponentName>LayoutSelectComponent
      ],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: <ComponentName>FormComponent,
          multi: true
        },
        {
          provide: AppConfig,
          useValue: appConfigMock
        },
        {
          provide: FeatureTogglesService,
          useValue: featureTogglesServiceMock
        },
        {
          provide: PermissionsService,
          useValue: permissionsServiceMock
        },
        ConfirmationDialogService,
        <ComponentName>FormUtilsService,
        <ComponentName>ImageSelectDialogService,
        {
          provide: SimpleModalService,
          useClass: SimpleModalServiceMock
        },
        TranslateService
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(<ComponentName>FormComponent);
    <ComponentName>FormUtilsService = TestBed.inject(<ComponentName>FormUtilsService);
    confirmationDialogService = TestBed.inject(ConfirmationDialogService);
    <ComponentName>ImageSelectDialogService = TestBed.inject(
      <ComponentName>ImageSelectDialogService
    );
    translateService = TestBed.inject(TranslateService);
    component = fixture.componentInstance;
  });

  ... tests

  ... the only failing test (see code block above)
  

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.

Upvotes: 0

Views: 55

Answers (0)

Related Questions