title: How to test styled Material-UI components wrapped in withStyles using react-testing-library?
body: <p>I am trying to create a test with a styled Material-UI component using react-testing-library in typescript. I'm finding it difficult to access the internal functions of the component to mock and assert. </p>
  
  <p>Form.tsx</p>
  
  <pre><code>export const styles = ({ palette, spacing }: Theme) =&gt; createStyles({
      root: {
          flexGrow: 1,
      },
      paper: {
          padding: spacing.unit * 2,
          margin: spacing.unit * 2,
          textAlign: 'center',
          color: palette.text.secondary,
      },
      button: {
          margin: spacing.unit * 2,
      }
  });
  
  interface Props extends WithStyles&lt;typeof styles&gt; { };
  
  export class ExampleForm extends Component&lt;Props, State&gt; {
    async handleSubmit(event: React.FormEvent&lt;HTMLFormElement&gt;) {
      // Handle form Submit
      ...
      if (errors) {
              window.alert('Some Error occurred');
              return;
          }
    }
    // render the form
  }
  export default withStyles(styles)(ExampleForm);
  </code></pre>
  
  <p>Test.tsx</p>
  
  <pre><code>import FormWithStyles from './Form';
  
  it('alerts on submit click', async () =&gt; {
    jest.spyOn(window,'alert').mockImplementation(()=&gt;{});
    const spy = jest.spyOn(ActivityCreateStyles,'handleSubmit');
    const { getByText, getByTestId } = render(&lt;FormWithStyles /&gt;)
    fireEvent.click(getByText('Submit'));
  
    expect(spy).toHaveBeenCalledTimes(1);
    expect(window.alert).toHaveBeenCalledTimes(1);
  })
  </code></pre>
  
  <p><code>jest.spyOn</code> throws the following error <code>Argument of type '"handleSubmit"' is not assignable to parameter of type 'never'.ts(2345)</code> probably because ExampleForm in wrapped in withStyles. </p>
  
  <p>I also tried directly importing the <code>ExampleForm</code> component and manually assigning the styles, was couldn't do so:</p>
  
  <pre><code>import {ExampleForm, styles} from './Form';
  
  it('alerts on submit click', async () =&gt; {
    ...
  
    const { getByText, getByTestId } = render(&lt;ActivityCreateForm classes={styles({palette,spacing})} /&gt;)
  
    ...
  }
  </code></pre>
  
  <p>Got the  following error: <code>Type '{ palette: any; spacing: any; }' is missing the following properties from type 'Theme': shape, breakpoints, direction, mixins, and 4 more.ts(2345)</code></p>
  
  <p>I'm finding it difficult to write basic tests in Typescript for <code>Material-UI</code> components with <code>react-testing-library</code> &amp; <code>Jest</code> due to strong typings and wrapped components. Please Guide.</p>