[Bug]: storybook v7 + Cypress 12.9 component Testing broken for React

[yann-combarnous]

Describe the bug

With Storybook v6, we were using the following guide to run Cypress component tests with Storybook: https://www.cypress.io/blog/2021/05/19/cypress-x-storybook-2-0/#header

We tried to upgrade to v7, and encountered errors in Cypress when running our tests:

The following error originated from your test code, not from Cypress.

module is not defined

   at <unknown> (http://localhost:5173/__cypress/src/node_modules/.vite/deps/@storybook_react.js?v=a45a78f5:8127:1)
From previous event:

We use Cypress 12.9.0 and Storybook 7.0.3

To Reproduce

Here is a simple test having this issue:

import { mount } from 'cypress/react18';
import * as stories from '../../stories/MyComponent.stories';
import { composeStories } from '@storybook/react';

const { MyComponent } =
  composeStories(stories);

describe('reservation MF', () => {
  it('Should do sthg, () => {
    mount(<MyComponent />);
  });
});

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - ~/homebrew/opt/node@18/bin/node
    Yarn: 3.5.0 - ~/homebrew/bin/yarn
    npm: 9.5.0 - ~/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 109.0.1
    Safari: 16.3

Additional context

This is the piece of code from Storybook where module is not defined:

var defaultProjectAnnotations = { render };
function composeStory2(story, componentAnnotations, projectAnnotations, exportsName) {
  return composeStory(story, componentAnnotations, projectAnnotations, defaultProjectAnnotations, exportsName);
}
function composeStories2(csfExports, projectAnnotations) {
  return composeStories(csfExports, projectAnnotations, composeStory2);
}
var _a;
(_a = module == null ? void 0 : module.hot) == null ? void 0 : _a.decline();
export {
  composeStories2 as composeStories,
  composeStory2 as composeStory,
  configure,
  forceReRender,
  raw,
  setGlobalConfig,
  setProjectAnnotations2 as setProjectAnnotations,
  storiesOf
};

[shilman]

@yann-combarnous Do you have a reproduction you can share? I've created what I think is a fix at #22085 but I don't have an easy way to test it. Thanks!

[yann-combarnous]

@yann-combarnous Do you have a reproduction you can share? I've created what I think is a fix at #22085 but I don't have an easy way to test it. Thanks!

Tried to create a repro with CodeSandbox, but it seems cypress cannot be run there, even in headless mode due to missing docker dep. Any sandbox environment you would know that supports it ?

[yann-combarnous]

@shilman , I manually edited node_modules/@storybook/react/dist/index.mjs with your fix, cleared Vite cache, and it worked for me. Thx!

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.6 containing PR #22085 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.6 containing PR #22085 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade