title: What's the proper typing for a React Testing Library wrapper in typescript?
body: <p>So i have something like this from kent c dodd's library that is super useful</p>
  <pre class="lang-js prettyprint-override"><code>
  import * as React from 'react'
  import {render as rtlRender} from '@testing-library/react'
  import {ThemeProvider} from 'components/theme'
  
  function render(ui, {theme = 'light', ...options} = {}) {
    const Wrapper = ({children}) =&gt; (
      &lt;ThemeProvider initialTheme={theme}&gt;{children}&lt;/ThemeProvider&gt;
    )
    return rtlRender(ui, {wrapper: Wrapper, ...options})
  }
  
  export * from '@testing-library/react'
  // override React Testing Library's render with our own
  export {render}
  </code></pre>
  <p>i'm having trouble converting it to typescript though. any thoughts on what i need to fine tune below?</p>
  <pre><code>import * as React from 'react'
  import { ReactNode } from 'react'
  import {render as rtlRender} from '@testing-library/react'
  import { QueryClientProvider, QueryClient } from 'react-query'
  
  interface WrapperProps {
    children: ReactNode
  }
  
  const queryClient = new QueryClient();
  function render(ui, {client = queryClient, ...options} = {}) {
    const Wrapper = ({children}: WrapperProps) =&gt; (
      &lt;QueryClientProvider client={client}&gt;
        {children}
      &lt;/QueryClientProvider&gt;
    )
    return rtlRender(ui, {wrapper: Wrapper, ...options})
  }
  
  export * from '@testing-library/react'
  // override React Testing Library's render with our own
  export {render}
  </code></pre>
  <p>i'm getting the below about typing on the wrapper:</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(ui: ReactElement&lt;any, string | JSXElementConstructor&lt;any&gt;&gt;, options: RenderOptions&lt;typeof import(&quot;path/node_modules/@testing-library/dom/types/queries&quot;), HTMLElement&gt;): RenderResult&lt;...&gt;', gave the following error.
      Type '({ children }: WrapperProps) =&gt; JSX.Element' is not assignable to type 'ComponentType&lt;{}&gt;'.
        Type '({ children }: WrapperProps) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;{}&gt;'.
          Types of parameters '__0' and 'props' are incompatible.
            Type '{ children?: ReactNode; }' is not assignable to type 'WrapperProps'.
              Property 'children' is optional in type '{ children?: ReactNode; }' but required in type 'WrapperProps'.
    Overload 2 of 2, '(ui: ReactElement&lt;any, string | JSXElementConstructor&lt;any&gt;&gt;, options?: Omit&lt;RenderOptions&lt;typeof import(&quot;path/node_modules/@testing-library/dom/types/queries&quot;), HTMLElement&gt;, &quot;queries&quot;&gt;): RenderResult&lt;...&gt;', gave the following error.
      Type '({ children }: WrapperProps) =&gt; JSX.Element' is not assignable to type 'ComponentType&lt;{}&gt;'.
        Type '({ children }: WrapperProps) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;{}&gt;'.ts(2769)
  index.d.ts(41, 3): The expected type comes from property 'wrapper' which is declared here on type 'RenderOptions&lt;typeof import(&quot;path/node_modules/@testing-library/dom/types/queries&quot;), HTMLElement&gt;'
  index.d.ts(41, 3): The expected type comes from property 'wrapper' which is declared here on type 'Omit&lt;RenderOptions&lt;typeof import(&quot;path/node_modules/@testing-library/dom/types/queries&quot;), HTMLElement&gt;, &quot;queries&quot;&gt;'
  </code></pre>