在 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 类实例，但我不确定如何执行。

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

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

这里的正确方法是什么？

Answer 1

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

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

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中的示例