隔离组件之间的共享存根答案

【问题标题】：Isolate shared stubs between components隔离组件之间的共享存根
【发布时间】：2019-11-04 16:21:16
【问题描述】：

我在一个单独的 .ts 文件中定义服务存根，该文件用于多个组件（这避免了我在每个组件中定义相同的存根）。问题是它会导致随机的单元测试，因为当一个组件修改一个存根的属性时，下一个将使用这个存根的组件会受到影响。

我正在使用扩展运算符定义我的 serviceStub 以每次都使用新的引用，但这似乎还不够。

export const myserviceStub = {
  ...{
    function1() {},
    propertyA: new BehaviorSubject(false),
  }
};

并在带有测试台的 beforeEach 中使用此存根：

providers: [
        { provide: myService, useValue: myserviceStub },

我希望 myServiceStub 与我的文件中定义的一样，而不是取决于单元测试的顺序。

【问题讨论】：

标签： angular typescript jasmine

【解决方案1】：

您应该将您的对象视为不可变的，在单独文件中的常量定义中使用扩展运算符不会阻止您更改对象的内部引用。每次导入这个 const 时，它总是使用相同的引用。

要获得不同的引用，您可以在提供程序上使用useFactory 并在您的共享存根文件中声明存根工厂：

export const myserviceStub = {
  function1() {},
  propertyA: new BehaviorSubject(false)
};

export function myServiceStubFactory() {
  return { ...myserviceStub };
}

然后您可以像这样提供它：

providers: [
   { provide: myService, useFactory: myserviceStub }
]

但是，这仍将共享在 propertyA 上定义的 BehaviorSubject，要更改它，您必须更新您的工厂：

export function myServiceStubFactory() {
  return { 
    ...myserviceStub,
    propertyA: new BehaviorSubject(false)
  };
}

所以，总而言之，最好只使用一个工厂，而不是固定对象，并在工厂返回方法中定义你的整个对象

【讨论】：

【解决方案2】：

感谢您的回答。我终于找到了一种使用 Object.create() 的方法来获得新的引用。

【讨论】：