Angular NgRx存储选择器单元测试

如何编写此函数的单元测试？我试图模拟选择器，比如

mockusersetingsselector=store.overrideSelector（selectUserSettings，initialState.userSettings）,，
测试呢

ngOnInit(): void {
        this.format = this.store.select(selectUserSettings).pipe(
          filter(
            (userSettings: UserSettingsState) =>
              Boolean(userSettings) && !userSettings.errors && !userSettings.isLoading && !!userSettings.localizationProfile
          ),
          map((userSettings: UserSettingsState) =>
            userSettings.localizationProfile.dateFormat.toLocaleLowerCase().replace('mm', 'MM')
          ),
          takeUntil(this.destroy)
        );
      }

description（'OverdueTableComponent'，（）=>{
let组件：过度使用的组件；
let夹具：组件夹具；
让商店：MockStore；
常量initialState:SettingsState=new SettingsInitialState（）；
让mockUserSettingsSelector:MemoizedSelector；
之前(
waitForAsync（（）=>{
TestBed.configureTestingModule({
声明：[OverdueTableComponent，OverdueEventTypeTranslationComponent]，
导入：[SimplebarAngularModule，StoreModule.forRoot（{}），StoreModule.forFeature（'settings'，settingsReducer）]，
提供程序：[OverdueTableComponent，OverdueEventTypeTranslationComponent，provideMockStore（{initialState}）]，
}).compileComponents（）；
})
);
在每个之前（（）=>{
fixture=TestBed.createComponent（OverdueTableComponent）；
组件=fixture.componentInstance；
store=TestBed.inject（MockStore）；
mockUserSettingsSelector=store.overrideSelector（selectUserSettings，initialState.userSettings）；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
它（'格式不应为空'，（）=>{
mockUserSettingsSelector.setResult({
错误：未定义，
孤岛加载：false，
本地化配置文件：{
货币：“虚拟货币”，
currencySymbol:“虚拟货币符号”，
日期格式：“dd/MM/yyyy”，
语言：“英语（英国）”，
时区：“虚拟时区”，
},
成功更新：false，
});
store.refreshtState（）；
fixture.detectChanges（）；
组件。ngOnInit（）；
expect（component.format）.not.toBe（null）；
});
});

但是没有任何结果

提前谢谢
 在设置模拟值之前，您正在调用组件.ngOnInit（）

，因此不会设置模拟值

请注意，第一个

fixture.detectChanges（）

也将触发

ngOnInit

方法。如果在每次之前在

中调用它，您需要将其从那里移除，并在设置完成后将其放置在测试用例中（并且您可以移除
ngOnInit的显式触发器
）


编辑：

未覆盖线路：
在设置模拟值之前，您正在调用
component.ngOnInit（）
，因此不会设置模拟值

请注意，第一个
fixture.detectChanges（）
也将触发
ngOnInit
方法。如果在每次

之前在

中调用它，您需要将其从那里移除，并在设置完成后将其放置在测试用例中（并且您可以移除
ngOnInit的显式触发器
）


编辑：

未覆盖线路：
我将组件.ngOnInit（）移动到fixture.detectChanges（）之后，但仍然不工作。请提供有关测试的更多信息，特别是测试设置。store.refreshState也是一个异步操作吗？我现在编辑了这个问题。正如我在回答中所写的，您需要从您的Preforeach中删除fixture.detectChanges。测试中的第一个fixture.detectChanges调用触发组件中的onInit方法。这也意味着您需要将其添加到每个
it
块中（在第一个测试中“应该创建”作为第一行，在mockStorage之后的测试中），我将组件.ngOnInit（）移动到fixture.detectChanges（）之后，但是仍然不工作请提供更多关于测试的信息，特别是测试设置。store.refreshState也是一个异步操作吗？我现在编辑了这个问题。正如我在回答中所写的，您需要从您的Preforeach中删除fixture.detectChanges。测试中的第一个fixture.detectChanges调用会触发组件中的onInit方法。这也意味着您需要将其添加到每个
it
块中（在第一个测试中，“应该创建”作为第一行，在测试中，在mockStorage之后）
    describe('OverdueTableComponent', () => {
  let component: OverdueTableComponent;
  let fixture: ComponentFixture<OverdueTableComponent>;
  let store: MockStore;
  const initialState: SettingsState = new SettingsInitialState();
  let mockUserSettingsSelector: MemoizedSelector<SettingsState, UserSettingsState>;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [OverdueTableComponent, OverdueEventTypeTranslationComponent],
        imports: [SimplebarAngularModule, StoreModule.forRoot({}), StoreModule.forFeature('settings', settingsReducer)],
        providers: [OverdueTableComponent, OverdueEventTypeTranslationComponent, provideMockStore({ initialState })],
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(OverdueTableComponent);
    component = fixture.componentInstance;
    store = TestBed.inject(MockStore);
    mockUserSettingsSelector = store.overrideSelector(selectUserSettings, initialState.userSettings);
    fixture.detectChanges();
  });

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

  it('format should not be null', () => {
    mockUserSettingsSelector.setResult({
      errors: undefined,
      isLoading: false,
      localizationProfile: {
        currency: 'dummy-currency',
        currencySymbol: 'dummy-currency-symbol',
        dateFormat: 'dd/MM/yyyy',
        language: 'English (British)',
        timezone: 'dummy-timezone',
      },
      successfullyUpdated: false,
    });
    store.refreshState();
    fixture.detectChanges();
    component.ngOnInit();
    expect(component.format).not.toBe(null);
  });
});

describe('OverdueTableComponent', () => {
  ...

  beforeEach(
    waitForAsync(() => {
      ...
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(OverdueTableComponent);
    component = fixture.componentInstance;
    store = TestBed.inject(MockStore);
    mockUserSettingsSelector = store.overrideSelector(selectUserSettings, initialState.userSettings);
    // PLEASE REMOVE THIS LINE fixture.detectChanges();
  });

  it('should create', () => {
    fixture.detectChanges(); // ADD THE CHANGE DETECTION HERE
    expect(component).toBeTruthy();
  });

  it('format should not be null', () => {
    mockUserSettingsSelector.setResult({
      errors: undefined,
      isLoading: false,
      localizationProfile: {
        currency: 'dummy-currency',
        currencySymbol: 'dummy-currency-symbol',
        dateFormat: 'dd/MM/yyyy',
        language: 'English (British)',
        timezone: 'dummy-timezone',
      },
      successfullyUpdated: false,
    });
    store.refreshState();
    fixture.detectChanges();
    // REMOVE THIS LINE as fixture.detectChanges() does it for you 
    // component.ngOnInit();
    expect(component.format).not.toBe(null);
  });
});