addon-interactions: jest-mock global is not defined

[peteromano]

My storybook setup works great until i add Interactions (with @storybook/jest):

Browser console fatal error (nothing loads):

Uncaught SyntaxError: The requested module '/node_modules/jest-mock/build/index.js?v=de720b8b' does not provide an export named 'fn'

However, adding /register seemed to work (based on https://stackoverflow.com/questions/68360359/storybook-addon-value-should-end-in-register-or-it-should-be-a-valid-preset):

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/addon-interactions/register'
  ],

BUT trying to actually use @storybook/jest in a story doesn't work:

import { expect } from '@storybook/jest';

Gives you this error in the browser:

Uncaught ReferenceError: global is not defined at node_modules/jest-mock/build/index.js

Commenting out this in main works with a normal Interactions install:

"core": {
    "builder": "storybook-builder-vite"
  },

TL;DR: So default webpack works for Interactions; Vite builder doesn't. (Other add-ons seem to work fine with vite builder btw)

[IanVS]

Do you see any messages in your terminal like this?

[vite] new dependencies found: packagename1, packagename2, updating...
[vite] ✨ dependencies updated, reloading page...

If so, you'll need to add whatever dependencies it's finding to your optimizeDeps.include in viteFinal. Here's an example: #173 (comment)

[peteromano]

@IanVS Awesome, ill try that and get back to you. Also ,while Im at it, is there another config in viteFinal i can add to change the asset path in the iframe? Ive done all manager-head stuff to change the base to under /storybook but with vite, assets like images etc still load under '/assets' (root).. (webpack works as expected though in this setup.)

[IanVS]

The viteFinal result is passed to vite, so you should be able to configure anything that vite allows: https://vitejs.dev/config/. Just be careful about overriding the defaults from the builder accidentally (use …config, etc).

I'm not certain exactly what you're describing, but maybe it's this? https://github.com/eirslett/storybook-builder-vite#note-about-working-directory. Feel free to open a new issues with some details and we can try to help out.

[mrauhu]

@peteromano here the guide:

How to enable Storybook Interactions addon with Vite builder

.storybook/main.js

module.exports = {
  addons: [
    '@storybook/addon-interactions',
    // ...
  ],
  // Change to a front-end framework of your choice
  framework: '@storybook/vue3',
  features: {
    // Optional, for fastest build
    storyStoreV7: true,
  },
  core: {
    builder: 'storybook-builder-vite',
  },
  /**
   * Extend Vite config
   * @param {import('vite').UserConfig} config
   * @param {'DEVELOPMENT'|'PRODUCTION'} [configType]
   * @returns {Promise<*>}
   */
  async viteFinal(config, { configType }) {
    // Needed only for development mode: `npm run storybook`
    config.optimizeDeps = configType === 'PRODUCTION' ? config.optimizeDeps : {
      ...(config.optimizeDeps || {}),
      include: [
        ...(config?.optimizeDeps?.include || []),
        // Fix: `@storybook/addon-interactions` exports is not defined or `jest-mock` does not provide an export named 'fn'
        'jest-mock',
        // Optional, but prevents error flashing in the Storybook component preview iframe:
        // Fix: failed to fetch dynamically import module, avoid cache miss for dependencies on the first load 
        '@storybook/components',
        '@storybook/store',
        // Add all addons that imported in the `preview.js` or `preview.ts` file and used in exported constants
        '@storybook/addon-links'
        '@storybook/theming',
      ],
    },
    // ...
    return config;
  };
}

.storybook/preview.js

import * as jest from '@storybook/jest';

// Fix: fn() is not defined, see: https://github.com/storybookjs/storybook/issues/15391
window.jest = jest;

.storybook/preview-head.html

<script>
  // Fix: add `jest` to global
  window.global = window;
</script>

---

@IanVS unfortunately the Storybook Interactions addon is sometimes checks for arguments of a story on the Docs page and failed with warning:

An update to Story inside a test was not wrapped in act(...)

Source of the error in the @storybook/theming package.

I think it's because the core Storybook addons it's written in React and the @storybook/addon-interactions using Jest inside to do testing.

[dereknex]

I have the same error. It's work find after install jest.

[IanVS]

New storybook projects created with npx sb init will automatically add a preview-head.html to avoid this issue. There's not much else that can be done until jest@28 is used by storybook.