Angular test with mocked provider throws error "Can't resolve all parameters for mockConstructor(?)."

[artemrudenko]

Issue

As mentioned in jestjs/jest#8401:

In Angular tests we're using mocks as providers like this:

{ provide: SomeClass, useClass: jest.fn(() => someImplementation) }

Angular creates a new instance of the mock when being asked to provide a SomeClass instance. This used to work fine in jest 23.x but in jest 24.x the mockConstructor now has a parameter. Angular looks at the constructor parameters and tries to inject a value for that parameter which fails with the error Can't resolve all parameters for mockConstructor: (?)..

There are some workarounds for this (like using useValue instead of useClass and create a new instance yourself) but I couldn't find anything about this issue anywhere else and it took quite some time to debug.

After some investigations, we found that this issue isn't reproducible with jest and babel and have place only with the latest jest24 and ts-jest.

Minimal repo

https://github.com/artemrudenko/jest-angular-ts-jest-issue

To Reproduce

Steps to reproduce the behavior:
yarn to install all dependencies
yarn test data to run data.service test

Current output:

Can't resolve all parameters for mockConstructor: (?).
      at syntaxError (../packages/compiler/src/util.ts:100:17)
      at CompileMetadataResolver._getDependenciesMetadata (../packages/compiler/src/metadata_resolver.ts:956:27)
      at CompileMetadataResolver._getTypeMetadata (../packages/compiler/src/metadata_resolver.ts:836:20)
      at CompileMetadataResolver._getInjectableTypeMetadata (../packages/compiler/src/metadata_resolver.ts:1088:17)
      at CompileMetadataResolver.getProviderMetadata (../packages/compiler/src/metadata_resolver.ts:1099:16)
      at ../packages/compiler/src/metadata_resolver.ts:1020:38

Expected behavior

Provide a mock without failing

[wtho]

This is probably not ts-jest-related, see thymikee/jest-preset-angular#288

---

To give more background: this is related to a missing reflect-metadata polyfill (see packages as core-js/es7/reflect or reflect-metadata) or, if these are included, the missing typescript compile option emitDecoratorMetadata: true. See thymikee/jest-preset-angular#314 for more background.

[artemrudenko]

@wtho no, unfortunately, this is not related to emitDecorators. Here is an issue of how angular resolving dependencies while building the testing module. What has changed in jest itself is migration to typescript which causes jest-mock module to produce a bit diff output for matchArity. This case is closely related to jestjs/jest#8401

[wtho]

I see. Looking at the Angular docs there is only an example with an TypeScript class being used as useClass argument. I do not think you should use custom functions or functions of third libraries and then expect no changes there, as it is clearly not the recommended way. The way they get provided may clearly differ from the default TS compilation steps and create difficulties.

I recommend you to use useValue or wrap your mocks inside a class as done in the official example.

[ahnpnl]

I agree with @wtho, useValue or useFactory should be used instead. This is not ts-jest issue but rather than using correctly Angular TestBed.

• useClass always accepts a class, means it has pure es6 js class with class keyword
• useValue is usually for pure value like {} or { <mock_classproperty>: <mock_value> }