Mocking a React higher-order component results in an error

[petervmeijgaard]

Hi all!

I'm trying to write a mock for a React higher-order component using vi.mocked, but I can't seem to get it to work
properly.

Every time I try this, I am greeted with the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might
have mixed up default and named imports.

However, I have been able to get this working by using vi.mock at the top of the test, but I need to change the mock a
bit for each test. Using vi.mock is not an option, because it will mock the component for all tests the same way.

I basically want to mock the HoC like this:

const withSayHelloMock = vi.mocked(withSayHello).mockImplementation(Component => props => (
  <Component {...props} subject="world" />
));

I have been able to reproduce this multiple times and I've created a GitHub repo for you to check out. It can be found here:
https://github.com/petervmeijgaard/vitest-hoc-example/tree/main

The file in question is located at MyComponent.spec.tsx.

I'm using PNPM as a package manager, so be sure to run pnpm install before running pnpm run test.

Thanks for the help!

---

  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: 8.8.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.1.0 => 4.1.0 
    @vitest/coverage-v8: ^0.34.6 => 0.34.6 
    @vitest/ui: ^0.34.6 => 0.34.6 
    vite: ^4.4.11 => 4.4.11 
    vitest: ^0.34.6 => 0.34.6