测试库无法设置只有 getter 的 [object Object] 的属性错误

如何解决测试库无法设置只有 getter 的 [object Object] 的属性错误

我在一个 Angular 应用程序中工作，我正在使用 testing-library 进行测试，情况是这样的：

我有这个组件：

<div class="inner-card" *ngIf="!error && !loading && hasInv">
  <div class="chart-xpto">
    <abc-port-chart-donut
      *ngIf="dadosChart"
      [legenda]="true"
      [dataset]="dadosChart"
      [largura]="donutHeight"
      [altura]="donutWidth"
      identifier="chart-xpto-abc"
    ></abc-port-chart-donut>
  </div>

这是组件的.ts：（如你所见，它扩展了一个BaseComponent）

export class XptoComponent extends XptoBaseComponent implements OnInit {

这是基础组件：

export class XptoBaseComponent extends XptoCommonComponent implements OnInit {
[...]
  get error(): boolean {
    if (
      this.service.response.responseStatus === HTTP_STATUS_CODE.BAD_REQUEST ||
      this.service.response.responseStatus === HTTP_STATUS_CODE.NOT_FOUND
    ) {
      return true;
    }
    return false;
  }

  get loading(): boolean {
    return !this.service.response.responseStatus && !this.service.response.responseError;
  }

  get hasInv(): boolean {
    if (this.service.response.responseStatus === HTTP_STATUS_CODE.NO_CONTENT) {
      return false;
    }

    return true;
  }

如您所见，我需要渲染组件的属性（error、loading 和 hasInv）只是 getter，它们来自基础组件...

这就是我尝试进行测试的方式：

it('teste render',async () => {
  const {container} = await render(XptoComponent,{
    componentProperties: {
      error: false,loading: false,hasInvestment: true
    }
  })
  const abc = container.querySelector(".inner-card");
  expect(abc).toBeInTheDocument();
});

但是当我尝试以这种方式进行测试时，我

** TypeError: 无法设置只有 getter 的 [object Object] 的属性错误**

所以我的问题是，如何在我的组件上设置这些属性，并能够使用 testing-library 在我的测试中正确呈现组件？

解决方法

您的属性只是获取，因此无法分配新值。

但是仍然有一个解决方案，它可能对您有用。您的 get 属性依赖于注入的服务this.service.response.responseStatus：

get error(): boolean {
    if (
      // this service can be mocked
      this.service.response.responseStatus === HTTP_STATUS_CODE.BAD_REQUEST ||
      this.service.response.responseStatus === HTTP_STATUS_CODE.NOT_FOUND
    ) {
      return true;
    }
    return false;
  }

因此，不要像这样使用 componentProperties 设置状态：

componentProperties: {
      error: false,loading: false,hasInvestment: true
    }

您可以像这样提供服务的模拟版本：

 const {container} = await render(XptoComponent,{
    providers: [{
       provide: YourServiceType,useValue: { response: { responseStatus: HTTP_STATUS_CODE.NO_CONTENT } }
     }]
  })

这会以所需的方式影响您只获取属性的结果 ->

error: false,hasInvestment: true