Тестирование ngrx: Uncaught TypeError: Невозможно прочитать свойство 'xxxx' неопределенного сгенерированного

Question

afterEach (() => {fixture.destroy ();}); в настоящее время я пытаюсь написать тесты для моего приложения angular 7 на основе ngrx.Проблема в том, что мой тест не проходит с ошибкой Uncaught TypeError: Cannot read property 'xxxx' of undefined thrown.Вот как выглядит мой тестовый файл.

explore-products.component.spec.ts

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", () => {
  let component: ExploreProductsComponent;
  let fixture: ComponentFixture<ExploreProductsComponent>;
  let store: MockStore<IAppState>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ExploreProductsComponent],
      providers: [provideMockStore()],
      imports: [StoreModule.forRoot(appReducers)]
    });

    store = TestBed.get(Store);
  });

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

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

Единственный should create тест выдает ошибку.Ошибка как-то генерируется selector, что означает, что свойство xxxx не инициализировано, но я не уверен, как его разрешить.Вот как выглядит мой компонент.

explore-products.component.ts

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<IAppState>) {}

  ngOnInit() {
    this.subscriptions();
  }
  subscriptions() {
    const subcriberProduct = this.productsSelector.subscribe(products => {
      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();
    }
  }
}

Пожалуйста, дайте мне знать, если я смогу предоставить любую другую информацию.

Обновление

Проблема с AppState.Ошибка генерируется, поскольку состояние не инициализируется, что приводит к возникновению ошибки, т.е. state.xxxx не определено.Ошибка иногда случайно не возникает.Я не уверен, как это исправить.

Та же проблема также упоминается здесь .Но нет решения

Answer 1

Вы можете попробовать что-то вроде этого. Посмотрите, как я создал макет магазина и использовал его. Добавлены однострочные комментарии (с ************) везде, где был обновлен код:

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", () => {
  let component: ExploreProductsComponent;
  let fixture: ComponentFixture<ExploreProductsComponent>;
  //Update the store def.************
  let store: MockStore<any>;

  beforeEach( async(() => { //*****************UPDATE
    TestBed.configureTestingModule({
      declarations: [ExploreProductsComponent],
      providers: [provideMockStore()],
      //Change to imports************
      imports: [StoreModule.forRoot({})]
    }).compileComponents();//*****************UPDATE
    //Removed this
    //store = TestBed.get(Store);************

  }));//*****************UPDATE

  beforeEach(() => {
    fixture = TestBed.createComponent(ExploreProductsComponent);
    //Get store instance************
    store = fixture.debugElement.injector.get(Store);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    //Spy on store actions************
    const spy = spyOn(store, 'dispatch');
   //Test is store is called properly************
   expect(spy).toHaveBeenCalledWith(Your params)
    expect(component).toBeTruthy();
  });
});