MockedProvider has incorrect typescript signature

[espretto]

By extending React.Component the MockedProvider already has a typed property children of type React.ReactNode. The interface MockedProviderProps incorrectly overrides it w/ React.ReactElement.

The error occurs for example when trying to preset the provider. This is how to re-produce the error:

import { MockedProvider } from "@apollo/client/testing";

const PresetProvider: React.FC = ({ children }) => (
  <MockedProvider addTypename={false} mocks={[]}>
    {children}
  </MockedProvider>
);

Typescript language-server error message:

var children: React.ReactNode
Type 'ReactNode' is not assignable to type '(ReactElement<any, string | JSXElementConstructor<any>> & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | undefined'.
  Type 'null' is not assignable to type '(ReactElement<any, string | JSXElementConstructor<any>> & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | undefined'.ts(2322)
MockedProvider.d.ts(14, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<MockedProvider> & Pick<Readonly<MockedProviderProps<{}>> & Readonly<...>, never> & Partial<...> & Partial<...>'

The exact code-line is

apollo-client/src/utilities/testing/mocking/MockedProvider.tsx

Line 18 in f498900

children?: React.ReactElement;

[benjamn]

@espretto Thanks for noticing this and reporting it! We'll take a look shortly.

[kevinperaza]

The type is being overridden on purpose to make React.cloneElement happy,

apollo-client/src/utilities/testing/mocking/MockedProvider.tsx

Line 62 in f498900

{React.cloneElement(React.Children.only(children), { ...childProps })}

DefinitelyTyped

   // DOM Elements
    // ReactHTMLElement
    function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
        element: DetailedReactHTMLElement<P, T>,
        props?: P,
        ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
    // ReactHTMLElement, less specific
    function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
        element: ReactHTMLElement<T>,
        props?: P,
        ...children: ReactNode[]): ReactHTMLElement<T>;
    // SVGElement
    function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>(
        element: ReactSVGElement,
        props?: P,
        ...children: ReactNode[]): ReactSVGElement;
    // DOM Element (has to be the last, because type checking stops at first overload that fits)
    function cloneElement<P extends DOMAttributes<T>, T extends Element>(
        element: DOMElement<P, T>,
        props?: DOMAttributes<T> & P,
        ...children: ReactNode[]): DOMElement<P, T>;

    // Custom components
    function cloneElement<P>(
        element: FunctionComponentElement<P>,
        props?: Partial<P> & Attributes,
        ...children: ReactNode[]): FunctionComponentElement<P>;
    function cloneElement<P, T extends Component<P, ComponentState>>(
        element: CElement<P, T>,
        props?: Partial<P> & ClassAttributes<T>,
        ...children: ReactNode[]): CElement<P, T>;
    function cloneElement<P>(
        element: ReactElement<P>,
        props?: Partial<P> & Attributes,
        ...children: ReactNode[]): ReactElement<P>;

This should work appropriately: kevinperaza#2

[jcreighton]

Thanks @kevinperaza! It looks the PR wasn't opened up against the correct base. Could you please change that? Then I can get it merged.