search

thymikee / jest-preset-angular

Jest configuration preset for Angular projects.
https://thymikee.github.io/jest-preset-angular/
MIT License
885 stars 306 forks source link

Test failing with apollo graphql code generator #962

Closed Nielsb85 closed 3 years ago

Nielsb85 commented 3 years ago

🐛 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Maybe try with yarn ngcc?

Nielsb85 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@ahnpnl https://github.com/kamilkisiela/apollo-angular/issues/1703 Still seems to be an issue. Not just for me.

ahnpnl commented 3 years ago

Could be related to https://github.com/thymikee/jest-preset-angular/issues/963 if you try to import namespaces.

Maximaximum commented 3 years ago

This is definitely a duplicate of https://github.com/thymikee/jest-preset-angular/issues/963