title: TypeScript/React - How to have function accept a generic component type?
body: <p>I'm working with React/TypeScript right now. When writing unit tests, I'm big on re-usable setup logic. Things like rendering my React component with React Testing Library, which I have to do every single time, I want to have a function that does it for me. Basically I pass in my React component and a few other arguments, and it does all the setup logic. Here is what I have right now:</p>
  <pre><code>import React, { ComponentType } from 'react';
  import { createMemoryHistory, MemoryHistory } from 'history';
  import { createStore, RootState } from '../../../src/store';
  import { EnhancedStore } from '@reduxjs/toolkit';
  import { render, waitFor } from '@testing-library/react';
  import { Provider } from 'react-redux';
  import { Router } from 'react-router';
  
  export interface RenderConfig&lt;T&gt; {
      component: ComponentType&lt;T&gt;;
      props?: T;
      reduxState?: Partial&lt;RootState&gt;;
  }
  
  export interface RenderResult {
      store: EnhancedStore&lt;RootState&gt;;
      history: MemoryHistory;
  }
  
  const renderComponent = async &lt;T extends object&gt;(config: RenderConfig&lt;T&gt;): Promise&lt;RenderResult&gt; =&gt; {
      const store = createStore(config.reduxState ?? {});
      const history = createMemoryHistory();
      const CompToRender = config.component;
      await waitFor(() =&gt;
          render(
              &lt;Provider store={store}&gt;
                  &lt;Router history={history}&gt;
                      &lt;CompToRender { ...(config.props ?? {}) } /&gt;
                  &lt;/Router&gt;
              &lt;/Provider&gt;
          )
      );
      return {
          store,
          history
      };
  };
  
  export default renderComponent;
  </code></pre>
  <p>As you can see, the renderComponent function takes in a configuration argument. This contacts the component prop, which is ComponentType, as well as an optional Props argument. I want the props to be the same generic type as the ComponentTypes generic parameter.</p>
  <p>When I do this, however, when I do  I get this error:</p>
  <blockquote>
  <p>TS2322: Type '{}' is not assignable to type 'T'.   '{}' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'object'.</p>
  </blockquote>
  <p>I know that {} is the default type of ComponentType's generic type parameter. I just don't understand how to make this logic work.</p>