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

Question

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 |   });

If you add a code sample of your component, the test of it and your test-utils, maybe it will be possible to simulate you issue. With just the code you added, i did a simple test and it work normally. — Luis Paulo Pinto, Jun 07 '22 at 11:56
@LuisPauloPinto Sorry I'm not following, which component ? because here the `TableVirtuoso` is a component from `react-virtuoso` library. — Renaud is Not Bill Gates, Jun 07 '22 at 18:57
The component you are testing. I supossed that you are testing some component that import and use `TableVirtuoso`. And that´s why the `jest.mock`, isn't it? — Luis Paulo Pinto, Jun 07 '22 at 19:05
Don't know if this relates, but you should also include the rest of `react-virtuoso` in the return value: `const { TableVirtuoso, ...rest } = jest.requireActual('react-virtuoso'); ... return { TableVirtuoso: mockVirtuoso(TableVirtuoso), ...rest };` — Son Nguyen, Jun 08 '22 at 11:31
@RenaudisNotBillGates Maybe the babel is not able to parse es6 syntax. — Subrato Pattanaik, Jun 11 '22 at 08:58

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

0 Answers0