Mocking NGRX Factory Selectors

[dmitryr117]

Currently there seems to be no explanation on how to mock factory selectors. Now that selectors with props are going
deprecated - being able to mock factory selectors will be a lot more main stream. Current store.overrideSelector way
does not seem to work with factory selectors of the form:

export const selectCustomer = (id: string) => {
  createSelector(selectCustomers, (customers) => customers[id]);
}

[markostanimirovic]

Try this:

// customer.selectors.ts
export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

// spec.ts
import * as customerSelectors from './customer.selectors';

it('should mock factory selector', (done) => {
  const customerMock = { id: '1', name: 'c1' };
  spyOn(customerSelectors, 'selectCustomer').and.returnValue(() => customerMock);
  
  const store = TestBed.inject(MockStore);
  store.select(customerSelectors.selectCustomer('1')).subscribe((customer) => {
    expect(customer).toBe(customerMock);
    done();
  });
});

Note: If you're using Jasmine, set "module": "commonjs" in tsconfig.spec.json.

"compilerOptions": {
  "module": "commonjs"
}

[dmitryr117]

Yeah. This was pretty close, although I am using jest, so I had to modify the code a little. I am testing an angular resolver that has to select stuff from ngrx store. Also the mocked selector factory function output requires a MemoizedSelector output type. so I had to create a fake selector there. I am also using @ngneat/spectator/jest. That's where the spectator variable comes from.

  it( 'mock ngrx selector factory test', () => {
    const fake_job_id = faker.datatype.uuid(); // requires faker
    route.params = { job_id: fake_job_id };
    const dataMock = [ "1", "2", "3", "4", "5" ];
    jest.spyOn( LibsContractorInfoSelectors, 'contractorsLoadedFor' ).mockImplementation(
      () => createSelector( () => null, () => dataMock ) // create a fake selector
    );
    const tst = spectator.service.resolve( route, null ); // requires @ngneat/spectator/jest to set up.
    expect( tst ).toBeObservable(
      hot('(a|)', { a: dataMock }) // requires jasmine-marbles
    )
  });

[lhbruneton]

Thanks ! This solved most of my issues. Still, when I use multiple times the same selector factory with different arguments in the same effect, I keep getting "error": [TypeError: Cannot read property 'ids' of undefined].
Do you have any idea why ?

[dmitryr117]

I wonder if you are using NGRX Entities. EntityState has this ids field. Maybe at some point your entity becomes undefined during testing. Because if you mocked your selector - it should just keep returning the same thing unless it gets altered somewhere.

[Kosmonaft]

Is there a different way of mocking the factory selector without changing the compilerOptions for Jasmine?

[Klaster1]

@Kosmonaft memoize the factory and use return values with overrideSelector. This works because memorized factory always returns a reference to the same selector for the same arguments.

[lhbruneton]

@dmitryr117 You're right, I am using NgRX Entities. But I already have several tests that work fine with your solution.
Now, as I said before, the only tests that are failing are those when I use multiple times the same selector factory with different arguments in the same effect.
I don't know how the ids field could become undefined, this is an internal property, we're not supposed to alter it in any way :/

[dmitryr117]

@lhbruneton I guess I you might have to post the code of what you are doing with an effect and the test because it is a bit unclear what is causing it. May have to do something with mocked function returning exactly the same output every time. I was unable to reproduce this issue in my environment.

[mathudak]

@dmitryr117

Yeah. This was pretty close ...

Never mind the question, I found the issue. The selector is not used in the component I'm testing but rather in it's entry component. And somehow moving the mockImplementation to 'should create' test helped. No idea why

it('should create', () => {
  jest.spyOn(fromSettings, 'selectPreferenceByKey').mockImplementation(() =>
    createSelector(
      () => null,
      () => ({
        preferenceKey: Preferences.NmrExportPath,
        preferenceType: 'type',
        value: 'path',
        possibleValues: [],
      })
    )
  );
  spectator.detectChanges();
  expect(spectator).toBeTruthy();
});

[vespertilian]

@dmitryr117 solution worked for me in my effect specs for anyone else ending up here.

I created a factory to create the mocks because I use this all over the place.

helper file

import { createSelector } from '@ngrx/store';

export const mockNgrxFactorySelectorFactory =
  ({ jest, moduleImport }) =>
  ({ method, result }: { method: string; result: any }) => {
    jest.spyOn(moduleImport, method as any).mockImplementation(
      () =>
        createSelector(
          () => null,
          () => result
        ) as any
    );
  };

test file

    import * as EventSessionSelectors from './event-sessions.selectors';

    const mockNgrxEventSessionsSelector = mockNgrxFactorySelectorFactory({
      jest,
      moduleImport: EventSessionSelectors,
    });

    mockNgrxEventSessionsSelector({
      method: 'getSelectedEntityTrackById',
      result: selectedEntityTrack,
    });

which replaces

        provideMockStore({
          selectors: [
            // not working
            {
              selector: EventSessionSelectors.getSelectedEntityTrackById(trackId: 'track-id')
              value: selectedEntityTrack,,
            },
          ],
        }),

[lhbruneton]

@lhbruneton I guess I you might have to post the code of what you are doing with an effect and the test because it is a bit unclear what is causing it. May have to do something with mocked function returning exactly the same output every time. I was unable to reproduce this issue in my environment.

@dmitryr117 Sorry for the late reply. Here is an isolated faulty commit
lhbruneton/taormina@1ca9a3f
As you can see, previous commits worked just fine.

So this is my new factory selector:

export const getLandCardsPivotsIncreaseAuspiciousYear = (count: number) =>
  createSelector(getAllDomainsCards, (entities: DomainsCardsEntity[]) =>
    entities.filter((pivot) => {
      if (
        pivot.cardType === LAND_CARD_INTERFACE_NAME &&
        pivot.cardId !== undefined
      ) {
        const land = landCards.get(pivot.cardId);
        return (
          land !== undefined &&
          isNextToCountWarehouseOrMonastery(pivot, entities, count)
        );
      }
      return false;
    })
  );

Here is my new effect:

  increaseResourcesAuspiciousYear$ = createEffect(() =>
    this.actions$.pipe(
      ofType(DomainsCardsActions.increaseAvailableResourcesForAuspiciousYear),
      withLatestFrom(
        this.domainsCardsStore.select(
          DomainsCardsSelectors.getLandCardsPivotsIncreaseAuspiciousYear(
            COUNT_1
          )
        ),
        this.domainsCardsStore.select(
          DomainsCardsSelectors.getLandCardsPivotsIncreaseAuspiciousYear(
            COUNT_2
          )
        ),
        this.domainsCardsStore.select(
          DomainsCardsSelectors.getLandCardsPivotsIncreaseAuspiciousYear(
            COUNT_3
          )
        ),
        this.domainsCardsStore.select(
          DomainsCardsSelectors.getLandCardsPivotsIncreaseAuspiciousYear(
            COUNT_4
          )
        )
      ),
      map(
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        ([_action, increaseOne, increaseTwo, increaseThree, increaseFour]) => {
          const updatesOne = this.updatesAvailableResources(increaseOne, 1);
          /* eslint-disable no-magic-numbers */
          const updatesTwo = this.updatesAvailableResources(increaseTwo, 2);
          const updatesThree = this.updatesAvailableResources(increaseThree, 3);
          const updatesFour = this.updatesAvailableResources(increaseFour, 4);
          /* eslint-enable no-magic-numbers */
          return DomainsCardsActions.updateDomainsCards({
            updates: [
              ...updatesOne,
              ...updatesTwo,
              ...updatesThree,
              ...updatesFour,
            ],
          });
        }
      )
    )
  );

And finally here is my new effect test:

  describe('increaseResourcesAuspiciousYear$', () => {
    it('should dispatch updateDomainsCards with array of changes', () => {
      const memo = createSelector(
        () => null,
        () => [
          {
            id: 'aaaa',
            domainId: ID_DOMAIN_RED,
            cardType: LAND_CARD_INTERFACE_NAME,
            cardId: ID_CLAY_PIT_RED,
            availableResources: 0,
          } as DomainsCardsModels.DomainsCardsEntity,
        ]
      );

      jest
        .spyOn(
          DomainsCardsSelectors,
          'getLandCardsPivotsIncreaseAuspiciousYear'
        )
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        .mockImplementation((_count: number) => memo);

      actions = hot('-a-|', {
        a: DomainsCardsActions.increaseAvailableResourcesForAuspiciousYear(),
      });

      const expected = hot('-a-|', {
        a: DomainsCardsActions.updateDomainsCards({
          updates: [
            {
              id: 'aaaa',
              changes: { availableResources: 1 },
            },
            {
              id: 'aaaa',
              changes: { availableResources: 2 },
            },
            {
              id: 'aaaa',
              changes: { availableResources: 3 },
            },
            {
              id: 'aaaa',
              changes: { availableResources: 3 },
            },
          ],
        }),
      });

      expect(effects.increaseResourcesAuspiciousYear$).toBeObservable(expected);
    });
  });

And here is the resulting failing test
https://github.com/lhbruneton/taormina/pull/58/checks?check_run_id=3379128313

I will try to get a minimal repro running on stackblitz, but it will take some time.
In the meantime, thanks for any advice you can give me. I can try anything needed on this repo.

[maxpontreau]

Try this:

// customer.selectors.ts
export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

// spec.ts
import * as customerSelectors from './customer.selectors';

it('should mock factory selector', (done) => {
  const customerMock = { id: '1', name: 'c1' };
  spyOn(customerSelectors, 'selectCustomer').and.returnValue(() => customerMock);
  
  const store = TestBed.inject(MockStore);
  store.select(customerSelectors.selectCustomer('1')).subscribe((customer) => {
    expect(customer).toBe(customerMock);
    done();
  });
});

Note: If you're using Jasmine, set "module": "commonjs" in tsconfig.spec.json.

"compilerOptions": {
  "module": "commonjs"
}

Try this:

// customer.selectors.ts
export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

// spec.ts
import * as customerSelectors from './customer.selectors';

it('should mock factory selector', (done) => {
  const customerMock = { id: '1', name: 'c1' };
  spyOn(customerSelectors, 'selectCustomer').and.returnValue(() => customerMock);
  
  const store = TestBed.inject(MockStore);
  store.select(customerSelectors.selectCustomer('1')).subscribe((customer) => {
    expect(customer).toBe(customerMock);
    done();
  });
});

Note: If you're using Jasmine, set "module": "commonjs" in tsconfig.spec.json.

"compilerOptions": {
  "module": "commonjs"
}

This solution isn't working with Angular strict mode. Do you have any for strict mode ?

[markostanimirovic]

@maxpontreau

You can cast fake selector:

spyOn(customerSelectors, 'selectCustomer').and.returnValue(
  (() => customerMock) as unknown as MemoizedSelector<object, Customer>
);

Or create a helper function:

function createMemoizedSelectorMock<Result>(
  result: Result
): MemoizedSelector<object, Result> {
  return createSelector(
    () => ({}),
    () => result
  );
}

Usage:

spyOn(customerSelectors, 'selectCustomer').and.returnValue(
  createMemoizedSelectorMock(customerMock)
);

[nschimek]

Just in case anyone ends up here trying to mock a Factory Selector in a Component that they're testing with Spectator, the suggestions above will work. However, you need to make sure that you still provide an empty Mock Store in your createComponentFactory call:

providers: [
  provideMockStore()
]

Then, before you create your component, setup your spy:

import * as yourSelectors from '../your.selectors';

beforeEach(() => {
  const dataMock = [ "1", "2", "3", "4", "5" ];
  jest.spyOn(yourSelectors, 'selectFactorySelectorName').mockImplementation(
    () => createSelector(() => null, () => dataMock) // create a fake selector
  );

  spectator = createComponent();
});

This should successfully mock anything like this in your component:

import * as yourSelectors from '../your.selectors';

factorySelector$ = this.store.select(yourSelectors.selectFactorySelectorName(value));

You can then of course covert this to one of the helper functions suggested above if you are going to be using it a lot.

This was probably obvious to most people, but it took me a little while to figure out so I figured I would share.

[LukasMachetanz]

Any updates on this? I would really like to know how this can be done as simple as before.

[david-shortman]

Export your selectors in an object:

export const customerSelectors = {
  selectCustomer: (id: string) => {
    createSelector(selectCustomers, (customers) => customers[id]);
  }
};

Then spying is trivial:

import { customerSelectors } from './customer.selectors';

it('should select the customer', (done) => {
  const customerMock = { id: '1', name: 'c1' };
  spyOn(customerSelectors, 'selectCustomer').and.returnValue(() => customerMock);
  
  const store = TestBed.inject(MockStore);
  store.select(customerSelectors.selectCustomer('1')).subscribe((customer) => {
    expect(customer).toBe(customerMock);
    expect(customerSelectors.selectCustomer).toHaveBeenCalledWith('1');
    done();
  });
});

[timdeschryver]

Moving this to a discussion because this isn't a bug.

[DaSchTour]

Is there any solution that does not include exporting/importing selectors as an object? How can a factory selector actually be mocked.

I tried something like this which seams to not do anything.

provideMockStore({
      selectors: [
        {
          selector: selectMemberById('test'),
          value: {
            name: 'User Name',
          },
        },
      ],
    }),

[david-shortman]

Selectors are functions. The question of how to mock a selector factory exported from a file is the same as how to mock a function exported from a file.

In JS testing frameworks that I'm aware of, you cannot replace the implementation of a function directly. Rather, you have to change whatever references that function (a class instance, plain object, or JS module) to reference a mock implementation.

[david-shortman]

In JavaScript, there is no way to access the address of a variable. This prevents us from changing the value of a variable outside the current scope. This means that test frameworks like Jest cannot, given a function reference, change that reference to point to a mock implementation.

[sergiomcunha]

Hi,
I was struggling with the presented solutions. For Jasmine they just don't work.
Reached this solution

// customer.selectors.ts
export const selectCustomer = (id: string) =>
  createSelector(selectCustomers, (customers) => customers[id]);

// spec.ts
import * as customerSelectors from './customer.selectors';

it('should mock factory selector', (done) => {
  const customerMock = { id: '1', name: 'c1' };
  spyOnProperty(customerSelectors, 'selectCustomer')
    .and.returnValue(() => 
       createSelector(
          () => ({}),
          () => customerMock
      )
    );
  
  const store = TestBed.inject(MockStore);
  store.select(customerSelectors.selectCustomer('1')).subscribe((customer) => {
    expect(customer).toBe(customerMock);
    done();
  });
});

No need to use "module": "commonjs" on tsconfig.spec.ts, also I was having problems when setting the tests to compile using "commonjs".

[silver-mx]

The solutions explained here are not working for me so far in Angular 13. I am spying on the selector in my test as below

NOTE: I tried setting the spy in beforeEach and beforeAll

spyOn(selectors, 'targetSelector').and.returnValue((() => mockedValue) as unknown as MemoizedSelector<object, string[]>);

BUT the error below is still thrown for the production code:

node_modules/@ngrx/store/src/models.d.ts:37:78
    37 export declare type SelectorWithProps<State, Props, Result> = (state: State, props: Props) => Result;
                                                                                    ~~~~~~~~~~~~
    An argument for 'props' was not provided.

The selector in this case is using a factory (see below) and not props. Any hint of what may be wrong?

export const targetSelector= (key: string) =>
  createSelector(
    selectors,
    (state: MyState) => state?.user[key]
  );

[david-shortman]

I'm a little confused by the naming of selectors in you example, since it sounds plural but I'm assuming it's a single selector and not an array of selectors (given that your projector only uses one slice named state).

You should be able to update like so:

export const targetSelector= (key: string) =>
  createSelector(
    [selectors], // wrap variadic list of selectors with array
    (state: MyState) => state?.user[key]
  );

[silver-mx]

Thanks for the clarification @david-shortman. My selector may look a bit strange but it is because I simplified the code for demonstration purposes. Do you know by chance is there is a plan to ease/improve the mocking for factory selectors? By looking at the thread it seems that more than 1 are having issues with that.

[david-shortman]

As long as factory selectors are strictly functions, then they cannot be mocked due to the following reason from this thread:

Selectors are functions. The question of how to mock a selector factory exported from a file is the same as how to mock a function exported from a file.

In JS testing frameworks that I'm aware of, you cannot replace the implementation of a function directly. Rather, you have to change whatever references that function (a class instance, plain object, or JS module) to reference a mock implementation.

In JavaScript, there is no way to access the address of a variable. This prevents us from changing the value of a variable outside the current scope. This means that test frameworks like Jest cannot, given a function reference, change that reference to point to a mock implementation.

[david-shortman]

However, if factory selectors were objects with a method, then that object's method could be replaced with a mock:

// currently, factories are written like this
export const selectTheSumOfItemsWithName = (name: string) =>
  createSelector(items, (items) =>
    items.filter((item) => item.name === name).reduce(sum)
  );

// there could be a class which `store.select` allowed as an input
class ParameterizedSelector<Params extends Array<unknown>, State, Result> {
  constructor(public factory: (...params: Params) => Selector<State, Result>) {}
}

// then we could created parameterized selectors
function createParameterizedSelector<Params extends Array<unknown>, State, Result>(factory: (...params: Params) => Selector<State, Result>) {
  return new ParameterizedSelector(factory);
};

// and we could write a test like
const selectItems = () => [{ name: 'one', n: 1 }, { name: 'two', n: 2 }];

const selectTheSumOfItemsWithName = createParameterizedSelector((name: string) =>
  createSelector(selectItems, (items) =>
    items.filter((item) => item.name === name).reduce((sum, { n }) => sum + n, 0)
));

jest.spyOn(selectTheSumOfItemsWithName.factory).mockReturnValue(() => 5);

doSomething();

expect(selectTheSumOfItemsWithName.factory).toHaveBeenCalledWith('one');

[david-shortman]

But I don't expect such a change, because it would be implemented for the purpose of making testing easier, while polluting store.select to accept input other than Selectors and MemoizedSelectors.

Instead, I think that in the documentation, we should recommend always aggregating selectors into objects, and demonstrate how this is beneficial both for exporting and importing selectors in production code, as well as for selectors and factory selectors.

[Maevus]

I came across this thread looking for information on mocking factory selectors; this worked for me, I imagine there was an update to implement this at some intervening point.

const mockObject = {bar}
const selected = factorySelector(foo).projector({ [foo]: {bar} })
expect(selected).toEqual(mockObject);

[SaravananManickam220592]

I have created a spy like below :

localPermissionSpy = spyOn(FromAuth.permissionFactorySelector,'hasPermission').and.returnValue((()=> true) as any);

before testBed.configureTestModule and try to override the return value later in a test as below :

localPermissionSpy.and.returnValue((()=> false) as any);

The value returned when i console log it says false but the observable consuming the selector in the component still says the value to be true.

can someone suggest a solution for this

[d-silvas]

We have found 3 ways of fixing the problem. See the following project for live examples: https://github.com/d-silvas/test-ngrx-factory-selector

1. Mock the parent selector

This is not ideal because the real selector is still used.

// selectors.ts
export const getName1 = (input: string) =>
  createSelector(getFeatureState, (state): string => input + ' ' + state.name);

// spec.ts
import * as selectors from './store/selectors';

describe('AppComponent', () => {
  let store: MockStore;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
      providers: [
        provideMockStore({
          selectors: [{ selector: selectors.getFeatureState, value: { name: 'Mocked1' }}],
        }),
      ],
    }).compileComponents();
    store = TestBed.inject(MockStore);
    const fixture = TestBed.createComponent(AppComponent);
  });

  describe('selectors', () => {
    it('should mock getName1', (done: DoneFn) => {
      store.pipe(select(selectors.getName1('Test1'))).subscribe((s) => {
        expect(s).toEqual('Test1 Mocked1');
        done();
      });
    });
  });
});

2. Mock the function that creates the selector

This is the same as the proposed solution. To avoid having to set commonjs in the compiler options, you can wrap the function in an object, and you will be able to mock it without any problem

// selectors.ts
export const factorySelectors = {
  getName2: (input: string) =>
    createSelector(getFeatureState, (state): string => input + ' ' + state.name)
};

// spec.ts
    it('should mock getName2', (done: DoneFn) => {
      spyOn(selectors.factorySelectors, 'getName2').and.returnValue(
        ((_: FeatureState) => 'Mocked2') as any
      );
      store
        .pipe(select(selectors.factorySelectors.getName2('Test2')))
        .subscribe((s) => {
          expect(s).toEqual('Mocked2');
          done();
        });
    });

3. Store the selector and override it with the usual ngrx/testing tools

Since calling createSelector() returns a selector, we can just store this selector object and use it in our tests like any other selector. This is the cleanest solution we've found so far.

// selectors.ts
export const getName3 = (input: string) =>
  createSelector(getFeatureState, (state): string => input + ' ' + state.name);

// app.component.ts
export class AppComponent {
  getName3Selector: any;

  constructor() {
    this.getName3Selector = selectors.getName3('AppComponent');
  }
}

// spec.ts
it('should mock getName3', (done: DoneFn) => {
    store.overrideSelector(component.getName3Selector, 'Mocked3');
    store.refreshState();
    store.pipe(select(component.getName3Selector)).subscribe((s) => {
        expect(s).toEqual('Mocked3');
        done();
    });
});

[milancakic89]

I found most useful to test selectors is when mocking the store. Mock data in store in a way that actual data is in the store. Then when u test your component, just test things in component, and component will use store and all her selectors to get the mocked data. That way u get your selectors tested, and u don't need to explicitly test the selector.