Interactions-addon relies on polyfilled `global` (via jest-mock)

Describe the bug

createed a vite / react app - added storybook:

npx sb@next init --builder storybook-builder-vite

Got an error saying I needed to add:

yarn add -D @mdx-js/preact

Finally ran:

yarn storybook

Got:

{
   "message":"Uncaught SyntaxError: The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'",
   "source":"http://localhost:6006/node_modules/@storybook/addon-interactions/dist/esm/preset/argsEnhancers.js",
   "line":28,
   "column":10,
   "error":{
      "message":"The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'",
      "name":"SyntaxError",
      "stack":"SyntaxError: The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'"
   },
   "origin":"preview"
}

[IanVS]

OK, thanks for the reproduction. I’ve figured out what’s going on. Even with the fixes I’ve attempted, jest-mock still internally tries to run ModuleMocker(global) which fails when global is not defined. In jest version 28.0.0-alpha.4, they’ve made a fix to use globalThis instead, which does run in the browser, but that version is not compatible with the node versions that storybook supports. I’ve asked if they can release a version of 27 with that change. In the meantime, you can create a preview-head.html with the contents of:

<script>
  window.global = window;
</script>

It’s not ideal, and we need to find a fix for new users of storybook + vite, but I think this will at least get you up and running for now.

[IanVS]

Hi, we have a report of this in the storybook-builder as well (https://github.com/eirslett/storybook-builder-vite/issues/242), although I think in the end, this is a problem either with jest, or with the way that addon-interactions is using jest-mock.

When I’ve needed to use jest-mock in my own project (which does not use addon-interactions), I can make it work by using:

import { ModuleMocker } from 'jest-mock';
const jest = new ModuleMocker(window);

I think the issue is that the addon-interactions imports fn directly from jest-mock: https://github.com/storybookjs/storybook/blob/f979a5cff227cd0e7fff495f23a198adb7eb656e/addons/interactions/src/preset/argsEnhancers.ts#L5

Which breaks in non-node or at least non-node-pollyfilled environments, because it uses global instead of window: https://github.com/facebook/jest/blob/465518a2fa17ce45f7e3280dd0f54351273432c4/packages/jest-mock/src/index.ts#L1200-L1202

CC @yannbf, would you consider a PR to change the way interactions-addon is importing jest-mock? I’ve seen this come up about half a dozen times in the last few days, now.