Review mocking solutions

[fregante]

I see a few issues with the current mocking situation:

• Transparent mocking via __mocks__ is picked up by both Jest and Storybook
  • This avoids config, but if a mock uses jest.fn, then Storybook fails
  • Such files have to export everything we used, not just whatever we want to override
• Inline mocking via jest.mock + callback
  • This allows partial mocks, but is relatively verbose both in declaration and in usage (import module, call jest.mock, then use (module.fn as any).mockResolvedValue() every time)

pixiebrix-extension/src/runtime/pipelineTests/trace.test.ts

Lines 41 to 56 in 56a43d7

	jest.mock("@/background/messenger/api", () => {
	const actual = jest.requireActual("@/background/messenger/api");
	return {
	...actual,
	getLoggingConfig: jest.fn().mockResolvedValue({
	logValues: true,
	}),
	};
	});
	beforeEach(() => {
	blockRegistry.clear();
	blockRegistry.register(echoBlock, contextBlock, throwBlock);
	(traces.addEntry as any).mockReset();
	(traces.addExit as any).mockReset();
	});

Possible solutions (discuss)

• Avoid or limit Storybook mock sharing
• Use ts-jest-mock to simplify mock typing
• 🤔

[twschiller]

There might also be ways to allow jest.fn in Storybook:

• https://stackoverflow.com/questions/64349461/make-jest-globally-available-in-storybook
• Vite + Storybook 6.3 + Jest: "global is not defined" storybookjs/storybook#15391

Given the popularity of Jest/Storybook, I suspect some people have found the "right way" to do this

[fregante]

Another current issue is that automatic mocking only works if the import in the source starts with @/:

• import '@/utils/file' will be mocked but import './file' won't

I think this can be solved by adjusting the config to map "full paths" as well.

[fregante]

I noticed that you started using jest.mocked, which was the intent of this issue