How to mock a service inside a Cypress Component Test for a Angular Standalone Component

How to provide a mock for a Standalone component in a cypress component test?

I have this mount-function inside my test:

function mount() {
cy.mount(TestComponent, {
providers: [
provideHttpClient(),
provideHttpClientTesting(),
{ provide: TestService, useValue: mockTestService },
],
});
}


The TestComponent looks like this:

@Component({
selector: 'app-test',
standalone: true,
imports: [TestModule],
templateUrl: './test.component.html',
styleUrl: './test.component.scss',
})
export class TestComponent { /* some code */ }


The TestModule provides the TestService and some other services it depends on (which I don't need for my test, since I want to use a mock).

The problem is, that it doesn't work. The test still calls the original service instead of the mock.

Continue reading...