主页 / coding / 问题 / 79493138
Accepted
Abdullah El-Kindy
Asked: 2025-03-08 02:05:28 +0800 CST

在独立的角度组件中模拟注入提供的服务，而不是在根目录中进行 Karma Jasmine 测试

  • 772

仅供参考：我正在使用19.1.0karma 的角度

假设我们有此服务和组件

// NOT PROVIDED IN ROOT!
@Injectable()
export class TestService {
  getData(): string {
    return 'this is real data'
  }
}

// Standalone component!
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers: [TestService]
})
export class AppComponent {
  service = inject(TestService)
}

正如您所注意到的，该服务不是在根中提供的，而是在组件中提供的，并且也被注入。我注意到，使用此设置我无法在 karma 单元测试中模拟此服务。我可以看到它与组件中提供的服务有关，但我不确定如何修复它。以下是测试的片段。

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [{
        provide: TestService,
        useValue: {
          getData: () => ('mocked data'),
        }
      }]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    expect(app).toBeTruthy();

    console.log(app.service.getData())
  });
});

我应该期望在这里app.service.getData()应该注销"mocked data"，但是，我得到了"this is real data"。

在此处输入图片描述

angular

1 个回答

  1. Best Answer

    该组件没有模拟服务（可能是因为它未在应用程序的根目录中提供）。因此，尝试overrideProvider配置模拟服务的方法，此方法有效。

    describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [
        {
          provide: TestService,
          useValue: {
            getData: () => 'mocked data',
          },
        },
      ],
    })
    .overrideProvider(TestService, {          // <- changed here!
        useValue: {                           // <- changed here!
          getData: () => 'mocked data',       // <- changed here!
        },                                    // <- changed here!
    })                                        // <- changed here!
    .compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    expect(app).toBeTruthy();

    console.log(app.service.getData());
  });
});
    • 1

相关问题