时间戳

首页 > 解决方案 > 测试组件时使用 2 个减速器的 Store 的 InitialState

angular - 测试组件时使用 2 个减速器的 Store 的 InitialState

问题描述

我正在尝试测试一个组件。它对 Ngrx 使用 2 种不同的减速器状态。请问如何在测试的初始状态中判断哪个来自 AppState 而另一个来自 AdminState (LazyLoaded)？

describe('UploadImageComponent', () => {
  let component: UploadImageComponent;
  let fixture: ComponentFixture<UploadImageComponent>;
  const initialState = {
    selectedPage: null,         // comes from AppState
    pages: [],                  // comes from AppState
    uploadLoading: false,       // comes from AdminState (LazyLoaded)
    thumbnailIsCreating: false  // comes from AdminState (LazyLoaded)
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UploadImageComponent],
      imports: [
        RouterTestingModule,
        AngularFireDatabaseModule,
        AngularFireModule.initializeApp(environment.firebase)
      ],
      providers: [
        PageDbService,
        AdminService,
        PagesService,
        provideMockStore({ initialState }),
      ]
    })
      .compileComponents();
  });

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

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

在运行 ng test 时，业力说：

TypeError：无法读取未定义的属性“thumbnailIsCreating”

我认为 selectedPage 和 pages 都通过了，但不是来自 AdminState 的另外两个。是因为 AdminState 是lazyLoaded 的吗？或者可能 initialState 是错误的？

标签： angularkarma-jasminengrx

解决方案

这很可能是你initialState的错误。

下载 Redux 开发工具（https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en，还有一个 Firefox 工具）并使用该工具查看商店的结构。这是您配置它的方式（https://ngrx.io/guide/store-devtools），然后您可以执行 npm start 并应该看到您的商店的结构。

我打赌你的 initialState 应该是这样的：

initialState = {
  selectedPage: null,         // comes from AppState
  pages: [],
  admin: {
      uploadLoading: false,       // comes from AdminState (LazyLoaded)
      thumbnailIsCreating: false
  }             
 
}

推荐阅读