Unable to test codegen services with jest

[hendrikgaffo]

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/[email protected]
├── @angular/[email protected] 
├── @angular/[email protected] 
├── @apollo/[email protected] 
├── @datorama/[email protected]
├── [email protected] 
├── [email protected] 
└── [email protected] 

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

[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.

[spali]

I have the same as @pafflique with generated code, it started after upgrading to jest 27.
regarding the error message and angular doc's, ApolloBase should have the @Injectable decorator anyway.

But I could also workaround by changing the generated code to not use namespace import:

import * as Apollo from 'apollo-angular';

to

import { Apollo as ApolloClient, Query as ApolloQuery, Mutation as ApolloMutation) from 'apollo-angular';

and changing the respective references too.

I started with this test, because I found some jest-preset-angular issues related to namespace imports.
I'm still now sure how and if this is related to the missing @Injectable decorator and if both can fix the problem.

[spali]

just did a test.
putting

Injectable()(ApolloBase);

in test-setup.ts (jest setup file) of the app to test, it works without changing the generated code.
So it seems, that the decorator would also fix the problem.

[WolfSoko]

Injectable()(ApolloBase); didn't help for me.

Here are some related issues:

• Unable to use services exported under a namespace w/ Jest 27 + Ng12 thymikee/jest-preset-angular#963
• Apollo has a constructor which is not compatible with Dependency Injection. It should probably not be @Injectable(). #1376

[spali]

@WolfSoko

Injectable()(ApolloBase); didn't help for me.

I found too my workaround was instable. But maybe I found it which could also fix your problem.
In my case I had to import ApolloBase and Apollo at in the test-setup.ts to be sure it worked.
Found this out, as I wanted to use the same workaround in a lib, which did not import Apollo.

So my current workaround is:

/**
 * TODO: workaround for https://github.com/kamilkisiela/apollo-angular/issues/1703
 *
 * has to be called in `test-setup.ts`:
 * 
 * ```
 * import { Apollo, ApolloBase } from 'apollo-angular';
 * import { fixApolloBase } from './workaround';
 * fixApolloBase(Apollo, ApolloBase);
 * 
 * ```
 *
 * @param _apollo `Apollo` has to be imported by the caller (forces the called to do so)
 * @param apolloBase `ApolloBase` has to be imported by the caller (forces the called to do so)
 * @returns
 */
export function fixApolloBase(
  _apollo: typeof Apollo,
  apolloBase: typeof ApolloBase
) {
  return Injectable()(apolloBase);
}

Then import and execute the function from within test-setup.ts. The arguments forces the caller (test-setup.ts) in this case to import the required classes:

import { Apollo, ApolloBase } from 'apollo-angular';
import { fixApolloBase } from './workaround';
fixApolloBase(Apollo, ApolloBase);

At least in my case this helped in multiple libs.

[Nielsb85]

@spali How does your jest.config look like. Above workaround does not work for me right now.

[spali]

@Nielsb85 I use an NX workspace with default generated jest.config.

the workspace jest.config.js:

const { getJestProjects } = require('@nrwl/jest');

module.exports = { projects: getJestProjects() };

the workspace jest.preset.js:

const nxPreset = require('@nrwl/jest/preset');

module.exports = { ...nxPreset };

the library jest.config:

module.exports = {
  displayName: 'graphql-client',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
    },
  },
  coverageDirectory: '../../coverage/libs/graphql-client',
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
  },
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

[spali]

@Nielsb85 I forget to mention.... be sure to clear jest cache before running tests and if it's a NX workspace to skip the nx-cache --skip-nx-cache. This made me some headages ... due inconsistent results.
Just be sure to always clear the cache before every test run and always skip the nx-cache during testing this workaround.

[Nielsb85]

@spali Thanks. Cache was already cleared. No luck so far.

[pafflique]

I used a "direct flavor" of the workaround.

import { Injectable } from '@angular/core';
import { ApolloBase } from 'apollo-angular';
Injectable()(ApolloBase);

[Maximaximum]

It has been very difficult to trace this issue to its actual cause, but this is the actual bug: thymikee/jest-preset-angular#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.

[kamilkisiela]

thanks Maximaximum