如何在 Cypress 组件测试中模拟 Angular 独立组件的服务

Question

如何在 cypress 组件测试中为独立组件提供模拟？

我的测试中有这个挂载功能：

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

TestComponent

看起来像这样：

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

TestModule

提供了

TestService

以及它所依赖的一些其他服务（我的测试不需要这些服务，因为我想使用模拟）。

问题是，它不起作用。测试仍然调用原始服务而不是模拟。

Answer 1

在模拟服务时必须使用

useClass

。

cy.mount(AppComponent, {
  providers: [
    // provideHttpClient(),
    provideHttpClientTesting(),
    { provide: TestService, useClass: MockTestService },
  ],
});

完整代码：

import { of } from 'rxjs';
import { AppComponent, TestService } from './app.component'
import { provideHttpClientTesting } from '@angular/common/http/testing';

export class MockTestService {
  getData() {
    return of([
      { testy: 1 }
    ])
  }
}

describe('AppComponent', () => {
  it('mounts', () => {
    cy.mount(AppComponent, {
      providers: [
        // provideHttpClient(),
        provideHttpClientTesting(),
        { provide: TestService, useClass: MockTestService },
      ],
    });
  })
})