'Cannot read property 'findIndex' of undefined

I'm trying to test one component in my application. In this component's constructor, I have a function findIndex, something like this: 

  dels: Del[];
  selectedDel: number = null; // It is a index
  selectedMun: number = null; // It is a index

    constructor(private _emitService: EmitService, private _locService: LocService) {
        let data = <Perfil>JSON.parse(localStorage.getItem('data'));
        this.dels = data.dels;
        this.selectedDel = this.dels.findIndex(x => x.id_del == JSON.parse(localStorage.getItem('Del')));
        this.changeDel(this.selectedDel);
        this.selectedMun = JSON.parse(localStorage.getItem('Mun'));
        _emitService.filter({ idEvent: 'CloseSidenav' });
      }

I'm trying to do a simple 'should create', but I receive this error:

TypeError: Cannot read property 'findIndex' of undefined

My test:

  beforeEach(() => {
    fixture = TestBed.createComponent(ChangeDelMunComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I have also tried this, but without success: 

  beforeEach(() => {
    fixture = TestBed.createComponent(ChangeDelMunComponent);
    component = fixture.componentInstance;        
  });

  it('should create', () => {
    localStorage.setItem('data', '{"id_user":"1234edr","dels":[{"id_del":50,"desc":"DESC 1","mun":[]}');
    localStorage.setItem('Del', '11');
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

I googled it and I didn't find anything. What I'm doing wrong? Any help would be appreciated. Thanks in advance!

EDIT : updating the test to this :

describe('ChangeDelMunComponent', () => {
  let component: ChangeDelMunComponent;
  let fixture: ComponentFixture<ChangeDelMunComponent>;
    beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [
            BrowserAnimationsModule,
            FormsModule,
            MatIconModule,
            MatCardModule,
            MatSelectModule,
            MatProgressBarModule,
            MatButtonModule,
            ToastrModule.forRoot(),
            HttpClientModule,
          ],
          declarations: [ChangeDelMunComponent],
          providers: [
            EmitService,
            LocalizacionesService
          ]
        })
          .compileComponents().then(() => {
            fixture = TestBed.createComponent(ChangeDelMunComponent);
            component = fixture.componentInstance;
            localStorage.setItem('data', '{"id_user":"1234edr","dels":[{"id_del":50,"desc":"DESC 1","mun":[]}');
            localStorage.setItem('Del', '11');
          });
      });

      it('should create', () => {
        fixture.detectChanges();
        expect(component).toBeTruthy();
      });
    });

The error findIndex disappears, but another error comes:

TypeError: Cannot read property 'detectChanges' of undefined

angularunit-testingkarma-jasmine


Solution 1:[1]

try using 

Object.values(dels).findIndex(what_you're_looking for)

Solution 2:[2]

Issue

You are trying to get the data from Service which is Asynchronous and you are retrieve the data before it is available.

Fix

Subscribe the the Observable which is being returned from the service class.

Your code should like 

 constructor(private _emitService: EmitService, private _locService: LocService) {
         = _locService.getData().subscribe(dels=>{ //subscribe the observable 
          this.dels = dels;
            this.selectedDel = this.dels.findIndex(x => x.id_del == JSON.parse(localStorage.getItem('Del')));
        this.changeDel(this.selectedDel);
        this.selectedMun = JSON.parse(localStorage.getItem('Mun'));
        _emitService.filter({ idEvent: 'CloseSidenav' });

     })

 }

Solution 3:[3]

I'v encountered the same issue, what solved mine was to avoid initializing arrays with undefined (array: undefined), instead use array: [].

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rogelio
Solution 2 Sunil Singh
Solution 3 Axifive

Related Questions