Can't resolve all parameters for Class: (?) although it has been provided

Question

I'm currently writing some test cases for services which are using ngxs for state management. I can't seem to figure out what's wrong with the code below:

// auth.service.ts
@Injectable({
    providedIn: 'root'
})
export class AuthService {
    @Select(SessionState) session$;
    constructor(private http: HttpClient, private store: Store) {
    }
}



// session.state.ts
export interface SessionStateModel {
    user: User | null;
    token: string | null;
    state: 'authenticated' | 'guest' | 'invalid.credentials' | 'error' | 'pending';
    response?: HttpErrorResponse | string | any;
}

export const defaultSessionState: SessionStateModel = {
    user: null,
    token: null,
    state: 'guest',
    response: null
};

@State<SessionStateModel>({
    name: 'session',
    defaults: defaultSessionState
})
export class SessionState {
    constructor(private auth: AuthService) {
    }
}


// session.state.spec.ts
describe('should handle login, logout and errors properly', () => {
    let store: Store;
    let backend: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule,
                NgxsModule.forRoot([SessionState])
            ],
            providers: [
                AuthService
            ]
        });

        backend = TestBed.get(HttpTestingController);
        store = TestBed.get(Store);
    });

    afterEach(() => {
        // After every test, assert that there are no more pending requests.
        backend.verify();
    });

    it('should handle successful login', () => {
        // oversimplified...
        expect(true).toBe(true);
    });
});

When I run this with ng test, karma returns the following exception: Error: Can't resolve all parameters for SessionState: (?).

This doesn't make any sense to me because I'm already providing what's necessary for the SessionState (which is the AuthService) in the TestBed.configureTestingModule. I can't seem to figure out what am I missing here?

Answer 1

At the time of this answer, ngxs does not work with Ivy if a state class has injected dependencies (but see edit below). You can turn off Ivy by setting the following compiler option in tsconfig.json:

{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Edit: Ngxs provides a migration guide for Ivy. Following this guide, you need to add the @Injectable decorator in addition to your @State decorator:

@State<SessionStateModel>({
    name: 'session',
    defaults: defaultSessionState
})
@Injectable()
export class SessionState {
    constructor(private auth: AuthService) {
    }
}