MockedProviderProps children type leads to Typescript error in simple example

[jhoch]

Intended outcome:
I expect the following code, in which I pass a React Functional Component that I wrote into MockedProvider, to work without type error:

// index.stories.tsx
import { MockedProvider } from '@apollo/react-testing';
import React from 'react';

import MyModal from '.';

export const Story = () => {
  return (
    <MockedProvider mocks={[]} addTypename={false}>
      <MyModal myProp="123" />;
    </MockedProvider>
  );
};

// index.tsx
export default function MyModal({
  myProp,
}: { myProp: string; }): JSX.Element {
  console.log(myProp);
  return <></>;
}

Actual outcome:
But I get this error on my use of MockedProvider:

Type '{ children: (string | Element)[]; mocks: never[]; addTypename: false; }' is not assignable to type 'Partial<Pick<Readonly<MockedProviderProps<{}>> & Readonly<{ children?: ReactNode; }>, "link" | "mocks" | "addTypename" | "defaultOptions" | "cache" | "resolvers" | "childProps" | "children">>'.
  Types of property 'children' are incompatible.
    Type '(string | Element)[]' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ... 7 more ... | undefined'.
      Type '(string | Element)[]' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ReactNodeArray'.
        Type '(string | Element)[]' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, keyts(2322)

Note: modifying the return type of MyModal did not fix the issue, nor did passing multiple <MyModal /> elements into <MockedProvider />.

How to reproduce the issue:
Let me know if I need to put together a sample repo with the above two files.

I fixed the type error by manually editing my node_modules/@apollo/react-testing/lib/mocks/types.d.ts file, changing the children property of MockedProviderProps:

export interface MockedProviderProps<TSerializedCache = {}> {
    mocks?: ReadonlyArray<MockedResponse>;
    addTypename?: boolean;
    defaultOptions?: DefaultOptions;
    cache?: ApolloCache<TSerializedCache>;
    resolvers?: Resolvers;
    childProps?: object;
    children?: React.ReactNode; // instead of React.ReactElement
    link?: ApolloLink;
}

A workaround in my code was to wrap my functional component in a React Fragment:

export const Story = () => {
  return (
    <MockedProvider mocks={[]} addTypename={false}>
      <>
        <MyModal myProp="123" />;
      </>
    </MockedProvider>
  );
};

Versions

  System:
    OS: macOS 10.15.3
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.0.5
  npmPackages:
    @apollo/react-hooks: ^3.1.3 => 3.1.3
    @apollo/react-testing: ^3.1.3 => 3.1.3
    apollo-cache-inmemory: ^1.6.5 => 1.6.5
    apollo-client: ^2.6.8 => 2.6.8
    apollo-link: ^1.2.13 => 1.2.13
    apollo-link-error: ^1.1.12 => 1.1.12
    apollo-link-http: ^1.5.16 => 1.5.16
    apollo-link-ws: ^1.0.19 => 1.0.19
    apollo-utilities: ^1.3.3 => 1.3.3

Also my yarn.lock shows that @types/react is at version 16.9.25, if that's relevant.

My tsconfig.json contains:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5"
  },
  "exclude": [".next", "node_modules"],
  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
}

[rue-mishakorablin]

Are there any updates on this?

[jcreighton]

Fixed with #7833.