How to override a component by creating a jest mock? (Error solving)

881 Views Asked by At

I have a test where I use a component called TableVirtuoso.

This component is imported as following:

import { TableVirtuoso } from 'react-virtuoso';

In my test I want to override the TableVirtuoso implementation by creating a mocked version with a HOC that set the initialItemCount attribute, so this is what I tried:

jest.mock('react-virtuoso', () => {
  const { TableVirtuoso } = jest.requireActual('react-virtuoso');

  const mockVirtuoso = (WrappedVirtuoso: ElementType) =>
    class extends mockComponent<{ totalCount: number }, unknown> {
      render() {
        return (
          <WrappedVirtuoso
            initialItemCount={this.props?.totalCount}
            {...this.props}
          />
        );
      }
    };
  return { TableVirtuoso: mockVirtuoso(TableVirtuoso) };
});

for reference, you can find this implementation here: https://github.com/petyosi/react-virtuoso/issues/26#issuecomment-1130584552

But when I tried this, I got the following error which I don't know how to fix:

TypeError: Class constructor  cannot be invoked without 'new'

      79 |   wrapperOptions?: WrapperOptions,
      80 | ) =>
    > 81 |   render(ui, {
         |   ^
      82 |     wrapper: props => <AllTheProviders {...props} {...wrapperOptions} />,
      83 |     ...options,
      84 |   });
0

There are 0 best solutions below