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

Question

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

我有这个组件：

<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;
  }

如您所见，我需要呈现组件的属性（错误、加载和 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: 无法设置 [object Object] 的属性错误，它只有一个 getter**

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

Answer 1

您的属性是只获取的，因此分配新值将不起作用。

但仍有一个解决方案，可能对您有用。您的获取属性依赖于注入的服务 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,
loading: false,
hasInvestment: true

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

Testing-library Cannot set property error of [object Object] which has only a getter

javascript

angular

typescript

angular-test

testing-library

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

Testing-library Cannot set property error of [object Object] which has only a getter

javascript

angular

typescript

angular-test

testing-library

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