question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Creating a spy from class with Testbed.inject does give a ts error

See original GitHub issue

I used the jasmine-auto-spies in the past with Angular 8. After updating to Angular 9 (and also 10.0.2) the Testbed function Testbed.get() got deprecated and it was recommended to use Testbed.inject which hasn’t effect for my tests that I wrote.

However it does the effect the use of this tool.

A simple setup:

describe('AppComponent', () => {
  let component;
  let serviceSpy: Spy<AppService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        AppComponent,
        { provide: AppService, useValue: createSpyFromClass(AppService) },
      ]
    });

    component = TestBed.inject(AppComponent);
    serviceSpy = TestBed.inject(AppService);
  });

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

The AppService has just an empty method and attribute.

The problematic line is serviceSpy = TestBed.inject(AppService); which for some reasons throws a ts error

Type 'AppService' is not assignable to type 'Spy<AppService>'.
  Types of property 'someMethod' are incompatible.
    Type '() => string' is not assignable to type 'AddSpyOnFunction<() => string>'.
      Type '() => string' is missing the following properties from type 'SpyMethod': calledWith, mustBeCalledWithts(2322)

Can you update the library to work with the newer Angular?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
shairezcommented, Jul 2, 2020

You’re right @batbrain9392 , you need to do it, but it becomes easier with code snippets (I show it in the “in action” course).

Again, this is not an issue that can be fixed with jasmine-auto-spies (I tried looking into it). because let someServiceSpy: Spy<SomeService> = TestBed.inject(SomeService) fails because inject returns a SomeService and not any like get() used to do.

So it’s the responsibility of TestBed.inject and it’s return type configuration and that’s why I the workaround is inevitable from what I can see.

One solution is to write a wrapper to TestBed.inject' that hides the need to add the <any>`, but again, because this library (jasmine-auto-spies) is not related to Angular specifically, it would need to be created independently or as another “helper” open source library.

Regarding the lint warning - you could disable that rule just for the spec files and that should calm tslint down as well.

Hope it helps

1reaction
shairezcommented, Jul 1, 2020

Thanks @LingVuDev !

The issue is not really an issue of jasmine-auto-spies (because it doesn’t depend on Angular).

The solution for Angular is to add a generic of <any> to the inject, for example:

serviceSpy = TestBed.inject<any>(AppService);

And that should quiet down TypeScript 😀

Check it out and let me know if it did the trick

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular TestBed.inject type error when injecting into a spy
So you'd eliminate any TS errors if you do this: valueServiceSpy = TestBed.inject(ValueService) as unknown as jasmine.SpyObj<ValueService>;.
Read more >
Testing Dependency Injection • Angular - codecraft.tv
When the component is created since it has its own injector it will resolve the AuthService itself and not forward the request to...
Read more >
8. Mocking the injected service using createSpyObj method ...
In this video we will see how to mock the injected service using jasmine.createSpyObj method and spy on the mocked service method ...
Read more >
How To Use Spies in Angular Testing - DigitalOcean
Learn how to spy on a component's service dependency to stub values or ensure that the service's methods are called.
Read more >
Testing services - Angular
In many cases, you can create and inject these dependencies by hand while calling the ... app/demo/demo.testbed.spec.ts (provide ValueService in beforeEach)
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found