[TypeScript] Typings for get/queryByType and get/queryAllByType breaks with components that has required props

[kdbcinco]

I'm using React Native Elements and testing my components using react-native-testing-library. However, when I try to use the getByType/getAllByType/queryByType/queryAllByType APIs, TypeScript complains about props that are marked by the component as required. One example of a component with a required attribute is the Icon component from React Native Elements.

Consider this example:

// Icon has a required prop `name`
import { Icon, Input } from 'react-native-elements';

// Current signature used by getByType/getAllByType/queryByType/queryAllByType
// getByType: (type: React.ComponentType) => ReactTestInstance;
// getAllByType: (type: React.ComponentType) => Array<ReactTestInstance>
// queryByType: (type: React.ComponentType) => ReactTestInstance | null;
// queryAllByType: (type: React.ComponentType) => Array<ReactTestInstance> | [];

const inst = render(<Input leftIcon={{ name: 'visibility-off' }} />);
// TypeScript fails!
const icon = inst.getByType(Icon);

Error shown

[ts]
Argument of type 'typeof Icon' is not assignable to parameter of type 'ComponentType<{}>'.
  Type 'typeof Icon' is not assignable to type 'ComponentClass<{}, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{}' is not assignable to type 'Readonly<IconProps>'.
        Property 'name' is missing in type '{}'. [2345]

[thymikee]

Do you know any better type for this other than React.ComponentType?
cc @Esemesek

[kdbcinco]

@thymikee I tried creating a function with (type: React.ComponentType<any>) and it's working. I'm not sure though if it'll affect anything internally with how react-native-testing-library works. I think the issue with just using plain React.ComponentType is that it sets the Props template parameter with an empty object by default.

// from @types/react
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

[thymikee]

But isn't it right? By default props is an empty object. Sounds like a bug in react-native-elements typings to me.

[henrikra]

Can you give more detailed example with more example code?

[kdbcinco]

The Icon component from RNE has this type definition:

class Icon extends React.Component<IconProps, any> {}

With IconProps defined as:

interface IconProps {
    // required
    name: string;
    // other props defined as optional (prop?: type;)
}

Now when using getByType(type: React.ComponentType) (which really means this getByType(type: React.ComponentType<{}>)), IconProps will not be compatible anymore because {} does not have the required name prop.

For now, I'm using the *ByName APIs as a workaround, though they're now deprecated.

[thymikee]

So, will changing React.ComponentType to React.ComponentClass<any, any> | React.StatelessComponent<any> do the trick? Maybe there's more permissive type provided by TS itself?

[kdbcinco]

I'm thinking of function getByType<P>(type: React.ComponentType<P>). That way, the function will follow the Prop type defined for the given type.

[thymikee]

Mind sending a PR plus adding a typing test in typings/__tests__?

[kdbcinco]

Sure, tomorrow as I'm already heading out of the office. 😄

[thymikee]

No rush, enjoy your weekend!

[kdbcinco]

@thymikee Done creating a PR. Might've messed it up a bit. 😅