How to mock an angular class with signals?

I've an angular web app. I'm trying to test some services, that have other services as depenency. I need to mock those others services to test my service. I'm using Jest+auto-jest-spies to mock my classes, but I'm open to other suggestions.

Here is an example of class that I'm trying to mock(a store made with signalstory) :

import { computed, Injectable } from '@angular/core';
import { ImmutableStore, useDevtools } from 'signalstory';
import { AccountStateModel } from './account-state.model';

@Injectable({ providedIn: 'root' })
export class AccountStore extends ImmutableStore<AccountStateModel> {
constructor() {
super({
plugins: [useDevtools()],
initialState: {
isInitialized: false,
email: null,
accessToken: null,
name: null,
tokenExpiration: null,
userId: null,
permissions: null,
},
});
}

//Queries
public get isLoggedIn() {
return computed(() => !!this.state().userId);
}
public get userInfo() {
return this.state;
}

// Commands
//...
}


I'm trying to mock it like this:

describe('PermissionGuard', () => {
let storeMock!: Spy<AccountStore>;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{ provide: AccountStore, useValue: createSpyFromClass(AccountStore, { gettersToSpyOn: ['isLoggedIn'] }) },
PermissionGuard,
],
}).compileComponents();
storeMock = TestBed.inject<any>(AccountStore);
});

it('should test the user access', async () => {
//Arrange
storeMock.isLoggedIn.mockReturnValue(false);

//Act
//...

//Assert
//...

});
});


But the isLoggedIn is not recognized as a getter, I guess because it's a getter of a "function"(signal).

So what can I do to mock this class?

Continue reading...