How to test styled Material-UI components wrapped in withStyles using react-testing-library? : <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>
