Shallow mock 扩展了 React.Component<MyInterface，any> 显示错误

Question

在模拟组件时出现以下错误。

转换类型 '{ 道具： { 索引： 数字;作业标题：字符串;赋值说明：字符串;分配使用小时数：字符串;分配计划小时数：字符串;分配开始日期：字符串;AssingmentEndDate： string;};}' 键入"InsightsComponent"可能是一个错误，因为这两种类型都与另一种类型充分重叠。如果这是有意为之，请先将表达式转换为"未知"。 键入 '{ 道具： { 索引： 数字;作业标题：字符串;赋值说明：字符串;分配使用小时数：字符串;分配计划小时数：字符串;分配开始日期：字符串;AssingmentEndDate： string;};}' 缺少类型"InsightsComponent"中的以下属性：百分比、切换、修剪零十进制、渲染和 5 更多.ts(2352( 算术运算的左侧必须是类型"any"、"number"、"bigint"或枚举类型.ts(2362(

下面是我的组件类看起来像

import * as React from 'react';
export interface InsightsComponentProps {
index: number,
AssignmentTitle: string,
AssignmentDescription: string,
AssignmentUtilizedHours: string,
AssignmentScheduledHours: string,
AssignmentStartDate: Date,
AssingmentEndDate: Date
}
export class InsightsComponent extends React.Component<InsightsComponentProps, any> {
constructor(props) {
super(props);
this.state = {
icon: any,
titleText: any,
titleTextColor: any,
expanded: false,
}
}
percentage = (parseFloat(this.props.AssignmentUtilizedHours) / parseFloat(this.props.AssignmentScheduledHours)) * 100;
toggle() {
this.setState({
expanded: !this.state.expanded
});
}
public trimZeroDecimal(value: any): string {
var splitDigits = value.toString().split(":");
if (splitDigits[1] == "00")
return splitDigits[0].toString();
else
return value.toString();
}
render() {
return (
<View />)
}
}

以下是我的测试类

import * as React from 'react';
import {InsightsComponent, InsightsComponentProps} from './statisticsComponent';
import {shallow,ShallowWrapper} from 'enzyme';
describe('Testing InsightComponent', () => {

const props = {
index: 1,
AssignmentTitle: 'string',
AssignmentDescription: 'string',
AssignmentUtilizedHours: 'string',
AssignmentScheduledHours: 'string',
AssignmentStartDate: '10:10:1985',
AssingmentEndDate: '10-10-1985',

};
let wrapper = ShallowWrapper<InsightsComponentProps,any>(<InsightsComponent {props} /> );   // getting compile-time error here

it('trimZeroDecimal', ()=>{

//let obj = new InsightsComponent(props);
//expect(mockPlaySoundFile.mock.calls.length).toEqual(0);
})
});
I wanted to test trimZeroDecimal() method that is inside this component. But I am getting errro while creating instance to component class. below line is showing error.
I just wanted to know how to create instance of react component which has multiple interface inherited
ShallowWrapper<InsightsComponentProps,any>(<InsightsComponent {props} /> );   // getting compile-time error here

Answer 1

我找到了解决方案。问题只是为了创造正确的道具方式

const Props:GetAssignmentDetails& NavigationInjectedProps={ LoadDetails: jest.fn(), //other props }

之后，您可以简单地创建如下所示的对象

const YourClass=new YourClass(Props);