在 Angular 11 中进行单元测试时，将 json 对象转换为 typescript 接口导致模拟对象出错

Posted 2023-03-13

【中文标题】在 Angular 11 中进行单元测试时，将 json 对象转换为 typescript 接口导致模拟对象出错

【英文标题】：Converting json object to typescript interface causing error in the mock object while unit testing in Angular 11

【发布时间】：2021-06-11 18:21:50

【问题描述】：

我在 Angular 11 应用程序中收到一个 json 响应，并且我创建了一个与该 json 对象对应的接口。 json对象是

  "division": 
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          ,
          
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          
      ]
   

我为这个 json 对象创建的 typescript 接口是

export interface FormField 
   id: number;
   name: string;
   label: string;
   value: string;


export interface Division 
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];


export interface Division 
   division: Division;

我正在使用服务 division.sevice.ts 从 API 获取上述 json 响应，一切正常。我正在尝试在 division.service.spec.ts 文件中为此服务编写单元测试。我在这个文件中创建了一个 mockDivisionObj 用于测试目的，如下所示。

mockDivisionObj = 
  "division": 
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          ,
          
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          
      ]
  

显示一个错误提示

Property 'division' is missing in type ' uid: string; name: string; title: string; type: 
string; formFields:  id: number; name: string; label: string; value: string; []; ' but 
required in type 'Division'.

我认为我创建界面的方式可能是错误的，但我无法弄清楚究竟是什么导致了这个问题。请帮我解决这个问题。

【问题讨论】：

你有两个接口，命名为division？

是的，但是当我将最后声明的接口名称更改为“AppDivision”时，在我的实际组件中，我收到错误“Division”类型中缺少属性“division”但在“AppDivision”类型中是必需的

我认为这段代码甚至不会编译，因为不可能定义两个具有相同名称的类型。你需要先解决这个问题。

即使我们在一个文件中有两个同名的接口，代码仍然可以编译，因为我的主要功能正常工作。但是为了解决上述问题，我将一个接口的名称更改为“AppDivision”，并修复了我上面提到的组件中的错误。

@suvenk 你可以查看我的答案。我认为您不需要名为AppDivision 的额外接口。最美好的祝愿:-)

【参考方案1】：

我能够通过将文件中的一个接口的名称更改为“AppDivision”来解决此问题，如下所示。

export interface FormField 
   id: number;
   name: string;
   label: string;
   value: string;


export interface Division 
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];


export interface AppDivision 
   division: Division;

两个接口同名导致单元测试mock对象出错。

【讨论】：

你可以查看我的答案。我认为您不需要名为AppDivision 的额外接口。最美好的祝愿:-)

【参考方案2】：

您的代码很好。要解决此错误，您可以尝试以下代码 =>

  this.division = this.mockDivisionObj.division as Division;

查看链接： StackBlitz Demo link。