Unable to appropriately mock a SignalStore when its within the providers array of the standalone component being tested

[skyleguy]

Which @ngrx/* package(s) are the source of the bug?

signals

Minimal reproduction of the bug/regression with instructions

given the following component and signal store:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, SignalOutputComponent],
  template: `<span>{{ appComponentStore.field() }}</span>`,
  providers: [AppComponentStore] // signal store is not global, so providing here
})
export class AppComponent {
  appComponentStore = inject(AppComponentStore);
}


export const AppComponentStore = signalStore(
  withState({
    field: 'hello',
  })
);

and a test (similar test using spectator also fails) for this component which attempts to expect that the value of the field signal from the signal store is equal to a mock value provided in the spec (not the default value of "hello")

describe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [
        {
          provide: AppComponentStore,
          useValue: {
            field: signal('hi'),
          },
        },
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
    expect(component.appComponentStore.field()).toBe('hi'); // assertion fails because the value is still "hello" since signal store has not been mocked appropriately
  });
});

We can see that even though the test bed provides an instance of the AppComponentStore, the component is still getting its own created and favoring that over the one provided in the test bed.

If we import the AppComponentStore from a module or the signal store is provided globally then mocking works as expected and the test passes.

Expected behavior

We would expect that the signal store would still be mocked appropriately even if the component has it referenced in its own providers array.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

angular: ^18.2.0
ngrx/signals: ^18.0.2
jest: ^29.7.0
browser: chrome
OS: mac

Other information

I know the testing information is not quite ready yet for signal stores and i am unsure of if this is an angular issue or a signal store issue but figured i would post here first and get some feedback. I dont really want to have to import a module which provides the signal store or make my signal store global just to be able to test it appropriately. Thanks for all the hard work, signal stores are really cool

I would be willing to submit a PR to fix this issue

• Yes
• No

[rainerhahnekamp]

@skyleguy, for overriding Services of a component, you need to use TestBed.overrideComponent:

TestBed.overrideComponent(AppComponent, {
  set: {
    providers: [
      {
        provide: AppComponentStore,
        useValue: {
          field: signal('hi'),
        },
      },
    ],
  },
});
TestBed.configureTestingModule(...)

Let me know if that works for you.

[skyleguy]

yes thank you, a little newer to standalone components still in my area and did not realize there was a difference in testing for standalone components. thanks for pointing that out. for my friends using spectator it would look something like this:

createComponentFactory({
 component: AppComponent,
 componentProviders: [ // instead of just using the providers array
    provide: AppComponentStore,
    useValue: {
        ....
      }
 ]

and then if you need to get that instance you do spectator.inject(AppComponentStore, true) instead of just spectator.inject(AppComponentStore) to set the fromComponentInjector to true so the instance can be grabbed correctly

[rainerhahnekamp]

Yup, if you use spectator and you want to mock a service, then I would use the property componentMocks of createComponentFactory.

[skyleguy]

i guess we use componentProviders so we can provide a value to use in place of the signal store so that we actually have access to the signals themselves and can set them and expect our component to react appropriately based on certain outputs from the signal store. That wouldnt be possible/easy with the componentMocks portion right? Or am I missing something.

[rainerhahnekamp]

I think componentMocks is exaclty what you want. Specator creates the mock and registers it the DI for you. Take a look: https://ngneat.github.io/spectator/docs/testing-components#component-providers

[skyleguy]

unfortunately this doesnt quite work for us as our component is attempting to use several fields of the signal store on start up and when using componentMocks we get errors that the fields are not known on the service. We've been using

mockProvider(OurSignalStore, {
  myField: signal(ourDefaultValue)
})

for that. Are we missing something that componentMocks is able to do?

[rainerhahnekamp]

Ah, I see; you want to set up some initialization logic. Well, in that case stick to your approach.