Angular Component Testing: providing of transitive dependencies fails

[rainerhahnekamp]

Current behavior

If I use a service in a component that has a dependency to HttpClient and I provide the HttpClient, the mounting fails.

The error message is

NullInjectorError
...
NullInjectorError: No provider for HttpClient!

If the component under test depends directly on the HttpClient and I provide the HttpClient, the mounting works.

Desired behavior

Providing of transitive dependencies should work.

Test code to reproduce

https://github.com/rainerhahnekamp/cypress-component-angular

@Component({
  template: '',
})
class NonTransitiveServicesComponent {
  constructor(private httpClient: HttpClient) {}
}

@Injectable({ providedIn: 'root' })
class LoaderService {
  constructor(private httpClient: HttpClient) {}
}

@Component({
  template: '',
})
class TransitiveServicesComponent {
  constructor(private loaderService: LoaderService) {}
}

describe('Component Testing', () => {
  it('succeeds to mount', () => {
    cy.mount(NonTransitiveServicesComponent, {
      providers: [{ provide: HttpClient, useValue: null }],
    });
  });

  it('fails to mount', () => {
    cy.mount(TransitiveServicesComponent, {
      providers: [{ provide: HttpClient, useValue: null }],
    });
  });
});

Cypress Version

10.9.0

Node version

16.15.0

Operating System

Windows 11 Professional

Debug Logs

No response

Other

No response

[astone123]

@rainerhahnekamp thanks for the detailed issue. This is a known issue with Angular CT, see the discussion on #23427. For the time being, you can work around this by doing something similar to what is mentioned in this comment.

[yjaaidi]

I totally agree with Rainer!

I think that I mislead us with this issue jordanpowell88/angular-ct#37

We actually need both: providers and componentProviders

This will be a breaking change so it might be better to do it while we're in the early stage.

What do you think?
cc. @astone123 @jordanpowell88

[cypress-bot]

The code for this is done in cypress-io/cypress#24394, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 11.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v11.0.0, please open a new issue.