angular - 在 Jasmine 中模拟导入的类实例

Question

我正在从外部库导入类实例并直接在类成员中使用，如下所示:

import { MyClient } from '@foo/bar';

export class DoStuff {

    public getStuff = () => {
        return MyClient.fetchThings();
    }
}

我从中导入这个类的库，像这样导出这个类:

// my-client.ts

class MyClient {
  //stuff
  async fetchThings() {
  }
}

export const myClient =  new MyClient();

-----

// index.ts

export {
  myClient as MyClient,
} from './my-client';

我希望能够在消费应用程序的 DoStuff 类中对导入的 MyClient 类实例进行 stub ，但我不确定该怎么做。

我正在考虑使用 ts-mock-imports但他们的示例似乎涵盖了您想要在您正在测试的类中新建一个导入类的情况。

在我的例子中，导入的类已经是一个实例。

什么是正确的方法？

Answer 1

正确的方法是使用 dependency injection .永远不要直接导入实例，而是让 Angular 注入(inject)实例。这样，服务就可以很容易地mocked by injecting the mocked service .

您可以在 MyClient 上创建一个包装器作为可注入(inject)服务，然后让 Angular 将其注入(inject)到 DoStuff 中。然后，在测试中你可以通过 mocked MyClientService.

import { MyClientService } from './my-client-service';

export class DoStuff {
    myClientService: MyClientService;

    constructor(myClientService) {
        this.myClientService = myClientService;
    }

    public getStuff = () => {
        return this.myClientService.fetchThings();
    }
}

我的客户端服务.ts:

import { Injectable } from '@angular/core';
import { MyClient } from '@foo/bar';

@Injectable({
    providedIn: 'root',
})
export class MyClientService {
     myClient: MyClient;

    constructor() {
        this.myClient = MyClient;
    }

    fetchThings() {
        return this.myClient.fetchThings();
    }
}

另请参阅 Angular documentation 中的示例