Shallow mock extends React.Component<MyInterface,any> showing error

Question

Getting below error while mocking component.

Conversion of type '{ props: { index: number; AssignmentTitle: string; AssignmentDescription: string; AssignmentUtilizedHours: string; AssignmentScheduledHours: string; AssignmentStartDate: string; AssingmentEndDate: string; }; }' to type 'InsightsComponent' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ props: { index: number; AssignmentTitle: string; AssignmentDescription: string; AssignmentUtilizedHours: string; AssignmentScheduledHours: string; AssignmentStartDate: string; AssingmentEndDate: string; }; }' is missing the following properties from type 'InsightsComponent': percentage, toggle, trimZeroDecimal, render, and 5 more.ts(2352) The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)

Below is my component class looks like

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 />)
}
}

Below is my test class

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

I find the solution. The issues was just to create right way to prop

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

After that you can simply create object like below

const YourClass=new YourClass(Props);