Test failing with apollo graphql code generator

[Nielsb85]

🐛 Bug Report

I migrated jest and jest-preset-angular to the latest version (jest 27 and jest-preset-angular 9.0.4)

When I now run unit tests, it will fail on the generated gql not able to resolve all parameters.

for example

@Injectable({
     providedIn: 'root'
   })
   export class ExampleGQL extends Apollo.Query<ExampleQuery, TenantFlowConfirmBankPageGetLeaseQueryVariables> {
     document = ExampleDocument;
     
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }

}

will now fail on

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

In previous version of jest-preset-angular and jest 26.x this all worked fine.

To Reproduce

setup testbed and add a generated GQL to the providers list
I created a repo where I simulated the situation (very light) but the error is the same

Expected behavior

I expect the test not to fail with Can't resolve all parameters for ExampleGql: (?) with "emitDecoratorMetadata": true
Just like on the old version of jest and jest-preset-angular

Link to repo (highly encouraged)

https://github.com/Nielsb85/jest-preset-angular

Error log:

● example › should not fail on missing deps

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

  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.compileModuleAndAllComponentsSync (../packages/compiler/src/jit/compiler.ts:65:38)
  at CompilerImpl.Object.<anonymous>.CompilerImpl.compileModuleAndAllComponentsSync (../packages/platform-browser-dynamic/src/compiler_factory.ts:61:35)
  at TestingCompilerImpl.Object.<anonymous>.TestingCompilerImpl.compileModuleAndAllComponentsSync (../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:54:27)
  at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine._initIfNeeded (../packages/core/testing/src/test_bed.ts:380:28)
  at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:585:10)
  at Function.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:236:36)
  at src/app/app.component.spec.ts:28:23

# content of error stacktrace :

envinfo

System:
    OS: OSX

Npm packages:
"@angular/animations": "12.0.5",
    "@angular/cdk": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/forms": "12.0.5",
    "@angular/localize": "12.0.5",
    "@angular/material": "12.0.5",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",
    "@apollo/client": "3.3.20",
    "@compodoc/compodoc": "1.1.11",
    "@ngrx/effects": "12.1.0",
    "@ngrx/router-store": "12.1.0",
    "@ngrx/store": "12.1.0",
    "angular-animations": "0.11.0",
    "apollo-angular": "2.6.0",
    "apollo-upload-client": "16.0.0",
    "core-js": "3.15.1",
    "graphql": "15.5.1",
    "hammerjs": "2.0.8",
    "lodash": "4.17.21",
    "ngx-clipboard": "14.0.1",
    "promise-polyfill": "8.2.0",
    "react": "^16.8.0 || ^17.0.0",
    "resize-observer-polyfill": "1.5.1",
    "rrule": "2.6.8",
    "rxjs": "7.1.0",
    "sanitize-filename": "1.6.3",
    "subscriptions-transport-ws": "^0.9.0",
    "tslib": "2.3.0",
    "typescript": ">=4.2.3 <4.3",
    "web-animations-js": "2.3.2",
    "zone.js": "0.11.4",
    "jest": "27.0.4"

"@angular-devkit/build-angular": "12.0.5",
    "@angular/cli": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@angular/language-service": "12.0.5",
    "@commitlint/cli": "12.1.4",
    "@commitlint/config-conventional": "12.1.4",
    "@graphql-codegen/cli": "1.21.5",
    "@graphql-codegen/introspection": "1.18.2",
    "@graphql-codegen/named-operations-object": "1.18.2",
    "@graphql-codegen/typescript": "1.22.3",
    "@graphql-codegen/typescript-apollo-angular": "2.3.6",
    "@graphql-codegen/typescript-apollo-client-helpers": "1.1.8",
    "@graphql-codegen/typescript-operations": "1.18.2",
    "@graphql-codegen/typescript-resolvers": "1.19.4",
    "@ngrx/store-devtools": "12.1.0",
    "@types/googlemaps": "3.43.3",
    "@types/graphql": "14.5.0",
    "@types/jest": "26.0.23",
    "@types/lodash": "4.14.170",
    "@types/node": "14.17.3",
    "@types/zen-observable": "0.8.2",
    "codelyzer": "6.0.2",
    "husky": "6.0.0",
    "jest-junit": "12.2.0",
    "babel-loader": "8.2.2",
    "jest-preset-angular": "9.0.4",
    "lint-staged": "11.0.0",
    "ng-mocks": "12.1.2",
    "npm-check": "5.9.2",
    "prettier": "2.3.1",
    "protractor": "7.0.0",
    "ts-node": "10.0.0",
    "tslint": "6.1.3",
    "tslint-config-security": "1.16.0",
    "typescript": "4.2.4",
    "webpack-bundle-analyzer": "4.4.2"

[ahnpnl]

Did you run ngcc before running tests?
The stacktrace indicates that Angular uses VE compiler instead of Ivy which throws the error.

You must always run ngcc before running tests to make sure everything works like Karma + Jasmine.

[Nielsb85]

Did you run ngcc before running tests?
The stacktrace indicates that Angular uses VE compiler instead of Ivy which throws the error.

You must always run ngcc before running tests to make sure everything works like Karma + Jasmine.

I also tried adding require('jest-preset-angular/ngcc-jest-processor'); in the jest config
but it gave the same result

[ahnpnl]

Maybe try with yarn ngcc?

[Nielsb85]

that seems to solve the issue on the demo repo I created. What is different that adding the require('jest-preset-angular/ngcc-jest-processor'); i which also seems to be running the ngcc command?

[ahnpnl]

require('jest-preset-angular/ngcc-jest-processor') is a custom utility script https://github.com/thymikee/jest-preset-angular/blob/master/src/utils/ngcc-jest-processor.ts which invokes ngcc under the hood. It works normally with Angular 11 but I don't know about Angular 12. So far my project with Angular 11 doesn't have issues with that script.

[Nielsb85]

for the example project I created it seemed to work.

For the actual project it is still failing.

    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.

[ahnpnl]

For the actual project it is still failing.

    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.

This error is also related to ngcc.

[Nielsb85]

running ngcc --tsconfig "./tsconfig.spec.json" && npx jest fixes the problem.
Thanks @ahnpnl

update: it eventually started failing again without being able to fix it. ngcc command seems not to be the solution.

[Nielsb85]

@ahnpnl kamilkisiela/apollo-angular#1703
Still seems to be an issue. Not just for me.

[ahnpnl]

Could be related to #963 if you try to import namespaces.

[Maximaximum]

This is definitely a duplicate of #963