[Bug]: @storybook/test breaks react-native storybook

[hamsteven]

Describe the bug

I have shared stories for storybook for web and storybook for react-native. They all contain the play function for interaction testing. The @storybook/test import int the stories fails the bundling process for web and native when starting up storybook for react-native.

Using https://storybook.js.org/addons/@storybook/addon-interactions for web breaks my react-native implementation of storybook. If I comment out the line below and mock out those imports then everything starts normally.

The line in my stories that breaks the app (both my normal app and storybook for react native) and causes the terminal to hang:
import { userEvent, within, expect, fn, waitFor } from "@storybook/test";

The addon-interactions addon is not in the react-native config and I just have it in my web storybook as seen below. The bundling goes to 100% but the terminal locks up and my expo app locks up on startup at the same time:

Using src/app as the root directory for Expo Router.
› Opening on iOS...
› Opening exp+member-app://expo-development-client/?url=http%3A%2F%2F192.168.1.7%3A8083 on iPhone 15 Pro
› Press ? │ show all commands
Using src/app as the root directory for Expo Router.
iOS ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (2765/2765)

Eventually I get "There was a problem loading the project" in my ios simulator.

When I add the addon-interactions addon to my react-native storybook like below:

import { type StorybookConfig } from "@storybook/react-native";

const main: StorybookConfig = {
  stories: ["../src/**/*.stories.?(ts|tsx|js|jsx)"],
  addons: [
    "@storybook/addon-ondevice-controls",
    "@storybook/addon-ondevice-actions",
    "@storybook/addon-ondevice-backgrounds",
    "@storybook/addon-interactions",

  ],
};
export default main;

then I get the following error:

› Open in the web browser...
› Press ? │ show all commands
Using src/app as the root directory for Expo Router.
Web Bundling failed 7010ms (index.js)
Unable to resolve "@storybook/addon-interactions/register" from ".storybook/storybook.requires.ts"

How do I work around this where I can use one story for both react and react-native versions of storybook?

To Reproduce

I went by Danny's implementation of both react and react-native side-by-side storybook example.

System

Need to install the following packages:
  storybook@8.0.9
Ok to proceed? (y) y

Storybook Environment Info:

  System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v18.14.2/bin/pnpm <----- active
  Browsers:
    Chrome: 124.0.6367.79
    Edge: 124.0.2478.51
    Safari: 17.1

Additional context

"@storybook/addon-actions": "^8.0.6",
"@storybook/addon-essentials": "^8.0.6",
"@storybook/addon-interactions": "^8.0.6",
"@storybook/addon-links": "^8.0.6",
"@storybook/addon-ondevice-actions": "~7.6.17",
"@storybook/addon-ondevice-backgrounds": "~7.6.17",
"@storybook/addon-ondevice-controls": "~7.6.17",
"@storybook/addon-react-native-web": "~0.0.23",
"@storybook/addon-themes": "^8.0.6",
"@storybook/react": "^8.0.6",
"@storybook/react-native": "~7.6.17",
"@storybook/react-vite": "^8.0.6",
"@storybook/test": "^8.0.6",
"@storybook/test-runner": "~0.17.0",

...
"storybook": "^8.0.6",

[dannyhw]

1. its best not to mix storybook 8 and storybook 7 so its probably best to downgrade everything to v7.6.18
2. wrap play function code in if (Platform.OS="web") the play function isn't fully supported for native

For react native itself the best you can do is unit tests with composeStories or write explicit integration tests with maestro or detox etc