Unable to test codegen services with jest

Describe the bug

We are using NX for our monorepo and created a library that is responsible for the generation and exposure of GraphQL services using codegen as suggested here. Using said services in our components works just fine. However, when it comes to testing (Jest), we get an error saying: Can't resolve all parameters for GetExampleGQL: (?).

To Reproduce

1. Create a Library with nx using the following codegen.yml and export the generated services

overwrite: true
schema: "http://your-server/graphql"
generates:
  libs/ngx/data-access/src/lib/generated/angular.ts:
    documents: "libs/ngx/data-access/src/lib/operations/**/*.graphql"
    config:
      querySuffix: GQL
      subscriptionSuffix: GQL
      mutationSuffix: GQL
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"

2. Use the generated services in a Jest test

import { CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GetExampleGQL } from '@my-org/ngx-data-access'; // imports the generated service
import { TranslateModule, TranslateStore } from '@ngx-translate/core';

import { DashboardIndexPageComponent } from './dashboard-index-page.component';

describe('DashboardIndexPageComponent', () => {
  let component: DashboardIndexPageComponent;
  let fixture: ComponentFixture<DashboardIndexPageComponent>;

  let getExample: GetExampleGQL;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [DashboardIndexPageComponent],
      imports: [CommonModule, TranslateModule.forChild()],
      providers: [TranslateStore, GetExampleGQL],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardIndexPageComponent);
    component = fixture.componentInstance;
    getExample = TestBed.inject(GetExampleGQL);

    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

3. Run tests

yarn nx test my-project --detect-open-handles

Outputs:

 FAIL   my-project  apps/my-project/src/app/features/dashboard/pages/index/dashboard-index-page.component.spec.ts
  ● DashboardIndexPageComponent › should create

    Can't resolve all parameters for GetExampleGQL: (?).

      at syntaxError (../../../packages/compiler/src/util.ts:108:17)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:1010:27)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:889:20)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getInjectableTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:1144:17)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.getProviderMetadata (../../../packages/compiler/src/metadata_resolver.ts:1155:16)
      at ../../../packages/compiler/src/metadata_resolver.ts:1076:38
          at Array.forEach (<anonymous>)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver._getProvidersMetadata (../../../packages/compiler/src/metadata_resolver.ts:1032:15)
      at CompileMetadataResolver.Object.<anonymous>.CompileMetadataResolver.getNgModuleMetadata (../../../packages/compiler/src/metadata_resolver.ts:697:30)
      at JitCompiler.Object.<anonymous>.JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:129:49)
      at JitCompiler.Object.<anonymous>.JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:117:32)
      at JitCompiler.Object.<anonymous>.JitCompiler.compileModuleAndAllComponentsAsync (../../../packages/compiler/src/jit/compiler.ts:69:33)
      at CompilerImpl.Object.<anonymous>.CompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:69:27)
      at TestingCompilerImpl.Object.<anonymous>.TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:59:27)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.compileComponents (../../../packages/core/testing/src/test_bed.ts:405:27)
      at Function.Object.<anonymous>.TestBedViewEngine.compileComponents (../../../packages/core/testing/src/test_bed.ts:170:25)
      at src/app/features/dashboard/pages/index/dashboard-index-page.component.spec.ts:19:8
      at ../../node_modules/tslib/tslib.js:117:75
      at new ZoneAwarePromise (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1347:33)
      at Object.__awaiter (../../node_modules/tslib/tslib.js:113:16)
      at src/app/features/dashboard/pages/index/dashboard-index-page.component.spec.ts:14:25
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Expected behavior

The test should pass.

Environment:

├── @angular-devkit/build-angular@12.2.1
├── @angular/cli@12.2.1 
├── @angular/core@12.2.1 
├── @apollo/client@3.4.7 
├── @datorama/akita@6.2.3
├── apollo-angular@2.6.0 
├── graphql@15.5.1 
└── typescript@4.3.5 

It would be nice if someone could share if I am doing something wrong in the test.

[Maximaximum]

It has been very difficult to trace this issue to its actual cause, but this is the actual bug: https://github.com/thymikee/jest-preset-angular/issues/963

The issue appears because jest-preset-angular does not support namespace imports like import * as Apollo from 'apollo-angular', and graphql-codegen puts such lines into its generated files.

[pafflique]

I think we have similar issue after upgrading from angular 11 to 12. For each such generated service

  @Injectable({
    providedIn: 'root'
  })
  export class MyGQL extends Apollo.Mutation<MyMutation, MyMutationVariables> {
    document = MyDocument;

    constructor(apollo: Apollo.Apollo) {
      super(apollo);
    }
  }

I get this error while testing with jest:

This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
    This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
    Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

Shouldn’t the ApolloBase be @Injectable ? Test works fine if I comment out the service.