title: ngrx testing: Uncaught TypeError: Cannot read property 'xxxx' of undefined thrown
body: <p>afterEach(() => {
      fixture.destroy();
    });I am currently trying to write tests for my ngrx based angular 7 application. The problem is that my test fails with the error <code>Uncaught TypeError: Cannot read property 'xxxx' of undefined thrown</code>. Here's how my test file looks like.</p>
  
  <p><strong>explore-products.component.spec.ts</strong></p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from "@angular/core/testing";
  
  import { ExploreProductsComponent } from "./explore-products.component";
  import { provideMockStore, MockStore } from "@ngrx/store/testing";
  import { IAppState } from "src/app/store/state/app.state";
  import { Store, StoreModule } from "@ngrx/store";
  import { appReducers } from "src/app/store/reducers/app.reducer";
  
  describe("ExploreProductsComponent", () =&gt; {
    let component: ExploreProductsComponent;
    let fixture: ComponentFixture&lt;ExploreProductsComponent&gt;;
    let store: MockStore&lt;IAppState&gt;;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ExploreProductsComponent],
        providers: [provideMockStore()],
        imports: [StoreModule.forRoot(appReducers)]
      });
  
      store = TestBed.get(Store);
    });
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ExploreProductsComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it("should create", () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>The only <code>should create</code> test is throwing the error. The error is being throwing by the <code>selector</code> somehow, which means the <code>xxxx</code> property is not initialized but I am not sure how to resolve it. Here's what my component looks like.</p>
  
  <p><strong>explore-products.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from "@angular/core";
  import { IProduct } from "src/app/models/product";
  import { environment } from "src/environments/environment";
  import { selectProducts } from "../../store/selectors/product";
  import { Store, select } from "@ngrx/store";
  import { IAppState } from "src/app/store/state/app.state";
  import { Subscription } from "rxjs";
  
  @Component({
    selector: "app-explore-products",
    templateUrl: "./explore-products.component.html",
    styleUrls: ["./explore-products.component.css"]
  })
  export class ExploreProductsComponent implements OnInit, OnDestroy {
    public productsLoading = true;
    public endpoint = environment.apiEndpoint;
  
    private productsSelector = this.store.pipe(select(selectProducts));
  
    public products: IProduct[];
    private subscriptionsArr: Subscription[] = [];
  
    constructor(private store: Store&lt;IAppState&gt;) {}
  
    ngOnInit() {
      this.subscriptions();
    }
    subscriptions() {
      const subcriberProduct = this.productsSelector.subscribe(products =&gt; {
        this.products = products;
        if (this.products !== null) {
          this.toggleLoadingSign(false);
        }
      });
      this.subscriptionsArr.push(subcriberProduct);
    }
    toggleLoadingSign(toggleOption: boolean) {
      this.productsLoading = toggleOption;
    }
    ngOnDestroy() {
      for (const subscriber of this.subscriptionsArr) {
        subscriber.unsubscribe();
      }
    }
  }
  </code></pre>
  
  <p>Please let me know if I can provide any other information.</p>
  
  <p><strong>Update</strong></p>
  
  <p>The problem is with <code>AppState</code>. The error is thrown since the state is not initialized which causes the error to occur i.e <code>state.xxxx</code> is undefined. The error sometimes randomly doesn't occur. I am not sure how to fix this.</p>
  
  <p>The same problem is also mentioned <a href="https://stackoverflow.com/questions/49503034/karma-unit-test-store-state-undefined">here</a>. But no solution</p>