0

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

'{ props: { index: number; 类型的转换 作业标题：字符串；分配描述：字符串；分配使用时间：字符串；AssignmentScheduledHours：字符串；分配开始日期：字符串；AssingmentEndDate：字符串；}; }' 键入 'InsightsComponent' 可能是一个错误，因为这两种类型都没有与另一种充分重叠。如果这是故意的，请先将表达式转换为“未知”。输入'{道具：{索引：数字；作业标题：字符串；赋值描述：字符串；分配使用时间：字符串；AssignmentScheduledHours：字符串；分配开始日期：字符串；AssingmentEndDate：字符串；}; }' 缺少 'InsightsComponent' 类型的以下属性：百分比、切换、trimZeroDecimal、render 和 5 more.ts(2352) 算术运算的左侧必须是 ' 类型

下面是我的组件类的样子

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
4

1 回答 1

0

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

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

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

const YourClass=new YourClass(Props);

于 2020-04-22T05:54:54.127 回答