Weird `jest.mock` behaviour that forces code duplication

This code works:

jest.mock('../../Spinner', () => () => <div>loading...</div>)

This code does not work:

const MockSpinner = () => <div>loading...</div>
jest.mock('../../Spinner', () => MockSpinner)

Error:

Invariant Violation: 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.

Importing the mock spinner component from another file also fails with error:

import Spinner from '__mocks__/Spinner'

jest.mock('../../Spinner', () => Spinner)

Error:

babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.

How can I prevent code duplication when mocking jest components? 😦

[developer239]

I also tried __mocks__ folder:

// none of these work
__mocks__/src/components/Spinner
__mocks__/components/Spinner
__mocks__/Spinner

Then in my test file:

jest.mock('../../Spinner')

Results in error:

Invariant Violation: SpinnerComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.