provideMockStore with MockBuilder in ng-mocks

Question

How to overrider the selector value in MockBuilder provided with provideMockStore

In general with Testbed

beforeEach(() => {
   TestBed.configureTestingModule({
      declarations: [
        ABCComponent,
        MockComponent(YYYComponent)
      ],
      providers: [
        provideMockStore({
          initialState: getMockAppState(),
          selectors: [
            {
              selector: getValue,
              value: true
            }
          ]
        })
      ]
    });
    storeStub = TestBed.inject(MockStore);
    dispatchSpy = jest.spyOn(storeStub, 'dispatch');
  });

it('.....', () => {
    storeStub.overrideSelector(getValue, false)
})

Answer 1

You need to use MockBuilder.provide.

Also, because you want to MockStore, you want to avoid mocking of ngrx modules: https://ng-mocks.sudo.eu/guides/libraries/ngrx.

And, you need to split initialization and configuration:

beforeEach(() => {
  return MockBuilder(ABCComponent)
    .mock(YYYComponent)

    .provide(
      provideMockStore({
        initialState: getMockAppState(),
        selectors: [
          {
            selector: getValue,
            value: true,
          },
        ],
      }),
    );
  });


// creating a factory
const factory = MockRenderFactory(ABCComponent);
beforeEach(() => factory.configureTestBed());


it('.....', () => {
  const storeStub = TestBed.inject(MockStore);
  const dispatchSpy = jest.spyOn(storeStub, 'dispatch');

  // rendering ABCComponent
  const fixture = factory();

  storeStub.overrideSelector(getValue, false)
});