title: In unit test: How to override an NGRX selector which is created by entityAdapter.getSelectors()
body: <p>Assume that our app has a books page.
  We are using: Angular, NGRX, jest.</p>
  <p><strong>Some lines of code to give a context (see actual problem below):</strong></p>
  <p>Interfaces of the books page's state:</p>
  <pre class="lang-ts prettyprint-override"><code>export interface Book {
    bookID: string;
    whatever: string;
  }
  
  export interface Books extends EntityState&lt;Book&gt; {
    error: boolean;
    loaded: boolean;
  }
  
  export interface BooksFeature extends RootState {
    books: Books;
    //...
  }
  </code></pre>
  <p>Added to ngrx store as feature:</p>
  <pre class="lang-ts prettyprint-override"><code>@NgModule({
    imports: [
      StoreModule.forFeature('books', booksReducer),
      //...
    ]
  </code></pre>
  <p>ngrx entityAdapter is created:</p>
  <pre class="lang-ts prettyprint-override"><code>export const booksAdapter = createEntityAdapter&lt;Book&gt;({
    selectId: (book: Book): string =&gt; book.bookID,
  });
  </code></pre>
  <p>Create <code>booksSelector</code> from <code>booksAdapter</code>'s <code>selectAll</code></p>
  <pre class="lang-ts prettyprint-override"><code>const { selectAll, selectTotal } = booksAdapter.getSelectors((state: BooksFeature) =&gt; state.books);
  
  export const booksSelector = selectAll;
  </code></pre>
  <p>Assign <code>booksSelector</code> to the component property: <code>books$</code></p>
  <pre class="lang-ts prettyprint-override"><code>public books$ = this.store.pipe(select(booksSelector));
  </code></pre>
  <p>Then the books$ observable is used for many things (eg. <code>&lt;div *ngIf=&quot;(books$ | async).length&quot;&gt;</code>, etc...).</p>
  <p><strong>The goal:</strong> Assume that <strong>I would like to unit test separately if the <code>books$</code> observable has always the same value as what the <code>booksSelector</code> broadcasts.</strong></p>
  <p>Normally I would do the following in the component's <code>books.component.spec.ts</code> file:</p>
  <p>General setup for component test:</p>
  <pre class="lang-ts prettyprint-override"><code>//...
  describe('BooksComponent', () =&gt; {
    let spectator: Spectator&lt;BooksComponent&gt;
    let store: MockStore;
    const initialState: RootState = {
      //...
      books: {
        ids: [],
        entities: {},
        error: false,
        loaded: false
      }
    };
  
    const testBook: Book = {
      bookID: 'bookid_1',
      whatever: 'whatever'
    };
  
    const createComponent = createComponentFactory({
      component: BooksComponent,
      providers: [
        provideMockStore({ initialState })
      ],
      imports: [
        StoreModule.forRoot({}),
        detectChanges: false
      ]
    });
  
    beforeEach(() =&gt; {
      spectator = createComponent();
      store = spectator.inject(MockStore);
    });
  
    afterEach(() =&gt; {
      jest.clearAllMocks();
    });
  //...
  </code></pre>
  <p><strong>And the important part:</strong></p>
  <pre class="lang-ts prettyprint-override"><code>//...
    describe('books$', () =&gt; {
        it('books$ should have the same value as what booksSelector gives', () =&gt; {
          const testBooks: Book[] = [testBook];
          const expected = cold('a', { a: testBooks });
  
          const mockBooksSelector = store.overrideSelector(booksSelector, testBooks);
  
          expect(spectator.component.books$).toBeObservable(expected);
        });
        //... Then I would like to use the mockBooksSelector.setResult(...) method too for other test cases
    });
  //...
  </code></pre>
  <p><strong>The problem with this is that the <code>MockStore</code>'s <code>overrideSelector</code> method expects a <code>Selector</code> as first parameter, but the <code>entityAdapter</code>'s <code>getSelectors</code> method returns with a <code>selectAll</code> method that has a different type.</strong></p>
  <p>Please let me know how could I replace this test with a proper solution!</p>
  <p>Please keep in mind, that the problem is simplified to keep it focused and I'm <strong>not</strong> looking for solutions like these:</p>
  <ul>
  <li>Test instead if the store.pipe is called with the proper select.</li>
  <li>Change the state manually in order to have the wished value given by <code>booksSelector</code>.</li>
  <li>Solutions that change things not only in the .spec file. (I mean, if it's really inevitable then OK)</li>
  </ul>
  <p>Thx!</p>