title: Ngrx 8: How to mock multiple selectors returning different value
body: <p>I'm writing unit tests for the angular 8 component whose dependency is a ngrx store. I've multiple selectors in <code>ngOnInit</code> function. I would like to mock those selectors using <code>overrideSelector</code> method.</p>
  <p>Currently, I'm facing the following issues:</p>
  <ol>
  <li><p>if I try to access the state selector using overrideSelector like this <code>mockStore.overrideSelector(fromDirectory.getAuthData, authenticationData);</code> it's expecting an argument for the selector and throwing error as,
  <code>No overload matches this call. Overload 1 of 3, '(selector: string, value: AuthData): MemoizedSelector&lt;string, AuthData, DefaultProjectorFn&lt;AuthData&gt;&gt;', gave the following error. Argument of type '(state: any) =&gt; any' is not assignable to parameter of type 'string'. Overload 2 of 3, '(selector: MemoizedSelector&lt;any, any, DefaultProjectorFn&lt;any&gt;&gt;, value: any): MemoizedSelector&lt;any, any, DefaultProjectorFn&lt;any&gt;&gt;', gave the following error. Argument of type '(state: any) =&gt; any' is not assignable to parameter of type 'MemoizedSelector&lt;any, any, DefaultProjectorFn&lt;any&gt;&gt;'. Type '(state: any) =&gt; any' is missing the following properties from type 'MemoizedSelector&lt;any, any, DefaultProjectorFn&lt;any&gt;&gt;': release, projector, setResult Overload 3 of 3, '(selector: MemoizedSelectorWithProps&lt;any, any, any, DefaultProjectorFn&lt;any&gt;&gt;, value: any): MemoizedSelectorWithProps&lt;any, any, any, DefaultProjectorFn&lt;any&gt;&gt;', gave the following error. Argument of type '(state: any) =&gt; any' is not assignable to parameter of type 'MemoizedSelectorWithProps&lt;any, any, any, DefaultProjectorFn&lt;any&gt;&gt;'. Type '(state: any) =&gt; any' is missing the following properties from type 'MemoizedSelectorWithProps&lt;any, any, any, DefaultProjectorFn&lt;any&gt;&gt;': release, projector, setResultts(2769)</code></p>
  </li>
  <li><p>If try to set the state using mockStore.setState() function it's not changing the state and I'm getting error as,
  <code>TypeError: Cannot read property 'authData' of undefined</code></p>
  </li>
  </ol>
  <p><strong>Here's the code:</strong></p>
  <p>home.page.ts:</p>
  <pre><code>import { Store } from '@ngrx/store';
  import { Observable, Subscription } from 'rxjs';
  import {
    getSubscribedReports,
    getSelectedSchedule,
    getSelectedSummary,
    getName,
    isUserAuthenticated
  } from '@app/store/directory.reducer';
  import { filter, first } from 'rxjs/operators';
  
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss']
  })
  export class HomePage implements OnInit, OnDestroy {
  
    subscribedReports$: Observable&lt;any[]&gt;;
    selectedSchedule$: Observable&lt;any&gt;;
    summary$: Observable&lt;string&gt;;
    showSearch: boolean;
    subscriptions: Subscription[] = [];
    selectName$: Observable&lt;any&gt;;
    isUserAuthenticated$: Observable&lt;boolean&gt;;
  
  
    constructor(
      private store: Store&lt;any&gt;,
  
    ) { }
  
    ngOnInit() {
      this.isUserAuthenticated$ = this.store.select(isUserAuthenticated);
      this.subscribedReports$ = this.store.select(getSubscribedReports);
      this.selectedSchedule$ = this.store.select(getSelectedSchedule);
      this.selectName$ = this.store.select(getName);
      this.summary$ = this.store.select(getSelectedSummary);
  
      this.getSubscribedReports();
    }
  
    getSubscribedReportsorts() {
      // some operations
    }
  
  
  
    ngOnDestroy() {
      this.subscriptions.forEach(sub =&gt; sub.unsubscribe());
    }
  
  }
  </code></pre>
  <p>home.page.spec.ts:</p>
  <pre><code>import { CUSTOM_ELEMENTS_SCHEMA, DebugElement, NO_ERRORS_SCHEMA } from &quot;@angular/core&quot;;
  import { async, ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed, tick } from &quot;@angular/core/testing&quot;;
  import { RouterTestingModule } from &quot;@angular/router/testing&quot;;
  import { Geolocation } from &quot;@ionic-native/geolocation/ngx&quot;;
  import { ModalController } from &quot;@ionic/angular&quot;;
  import { MockStore, provideMockStore } from &quot;@ngrx/store/testing&quot;;
  import { HomePage } from &quot;./home.page&quot;;
  import { AppState, directoryReducer, initializeState } from &quot;@app/store/directory.reducer&quot;;
  import * as fromDirectory from '@app/store/directory.reducer';
  import { AuthData, SelectedPortSchedule, SubscribedReports } from &quot;@app/providers/directory.model&quot;;
  import { By } from &quot;@angular/platform-browser&quot;;
  import { Store, StoreModule } from &quot;@ngrx/store&quot;;
  import {
      authenticationData, 
      subscribedReportsData,
      selectedPortScheduleData,
   } from &quot;@testData/home.page.testData.ts&quot;
  
  
  fdescribe(&quot;HomePage&quot;, () =&gt; {
      let component: HomePage;
      let fixture: ComponentFixture&lt;HomePage&gt;;
      let el: DebugElement;
      let storeMock: any;
  
      let mockStore: MockStore&lt;{directory: AppState}&gt;;
     
      
      
      let initialState = initializeState();
      let storeSpy = jasmine.createSpyObj('Store', ['select', 'dispatch']);
      let modalCtrlSpy = jasmine.createSpyObj('ModalController', ['create']);
      let geoLoactionSpy = jasmine.createSpyObj('GeoLocation', ['getCurrentPosition']);
  
      beforeEach(async() =&gt; {
          storeMock = {
              dispatch: jasmine.createSpy('dispatch'),
              select: jasmine.createSpy('select')
            };
  
  
          TestBed.configureTestingModule({
              declarations: [HomePage],
              imports: [
                  RouterTestingModule.withRoutes([]),
                  StoreModule.forRoot({ directory: directoryReducer })
              ],
              providers: [
                  provideMockStore(),
                  // { provide: Store, value: storeSpy },
                 
                  { provide: ModalController, value: modalCtrlSpy },
                  { provide: Geolocation, value: geoLoactionSpy }
              ],
              schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
          }).compileComponents();
  
          fixture = TestBed.createComponent(HomePage);
          component = fixture.componentInstance;
          mockStore = TestBed.get(Store);
  
          
  
          fixture.detectChanges();
  
          
      });
      
      beforeEach(() =&gt; {
          el = fixture.debugElement;
          mockStore.setState({
              directory: {
  
                  ...initialState,
                  authData: authenticationData,
                  subscribedReports: subscribedReportsData,
                  selectedPortSchedule: selectedPortScheduleData,
                  selectedPortScheduleSummary: selectedPortScheduleData.summary,
              }
  
          });
          mockStore.refreshState();
          fixture.detectChanges();
  
          mockStore.overrideSelector(fromDirectory.getAuthData, authenticationData);
          mockStore.overrideSelector(fromDirectory.getSubscribedReports, subscribedReportsData);
          mockStore.overrideSelector(fromDirectory.getSelectedSchedule(selectedScheduleData), selectedScheduleData);
          mockStore.overrideSelector(fromDirectory.getPortName, (ports: any) =&gt; (id: string) =&gt; ports.find(port =&gt; port.id == id));
          mockStore.overrideSelector(fromDirectory.getSelectedSummary(selectedScheduleData.summary), selectedScheduleData.summary );
          mockStore.refreshState();
          // await fixture.whenStable();
          fixture.detectChanges();
      });
  
      it(&quot;should create the page&quot;, () =&gt; {
          expect(component).toBeTruthy();
      });
  
      it(&quot;should verify user is authenticated&quot;, () =&gt; {
          let isUserAuthenticated: boolean;
          component.isUserAuthenticated$.subscribe(data =&gt; isUserAuthenticated = data);
          expect(isUserAuthenticated).toBeTruthy();
      });
  
      it(&quot;should load subscribed reports&quot;, () =&gt; {
          component.subscribed$.subscribe(data =&gt; {
              console.log('subscribed reports: ', data);
          })
      })
  });
  </code></pre>
  <p><strong>Please help me to solve this issue!</strong></p>