测试组件时使用 2 个 reducers 的 InitialState of Store

Question

我正在尝试测试一个组件。它在 Ngrx 中使用了 2 种不同的 reducer 状态。请问如何在测试的initialState中判断哪个来自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 测试，业力说：

TypeError: Cannot read property 'thumbnailIsCreating' of undefined

我认为 selectedPage 和 pages 通过得很好，但 AdminState 的其他两个则没有。是因为 AdminState 是 lazyLoaded 吗？或者 initialState 是错误的？

Answer 1

很可能你的initialState是错误的。

下载 Redux 开发工具 (https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en, there is also a Firefox one) and see the structure of your store using that tool. This is how you configure it (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
  }             
 
}

测试组件时使用 2 个 reducers 的 InitialState of Store

InitialState of Store with 2 reducers while testing a component

karma-jasmine

ngrx

angular