Error while using story in unit test: "Cannot find module 'storybook/internal/preview-api'"

[mDandini]

Summary

Summary

After upgrading to version 8.4.5, I'm unable to run a Jest unit test that pulls in a story through composeStories. The error message is:

Test suite failed to run

Cannot find module 'storybook/internal/preview-api' from 'node_modules/@storybook/react/dist/index.js'

Require stack:
node_modules/@storybook/react/dist/index.js
src/UI/Widgets/MyWidget/MyWidget.test.tsx

Environment

• Node 20.16.0
• Typescript 4.9.5
• Babel 7.20.12
• Jest 27.5.1
• React 18.2.0
• Webpack 5.83.1
• React-scripts 15.8.1

Additional information

Code below has been anonymized.

Unit test

import { composeStories } from "@storybook/react";

import * as MyWidgetStories from "../../../stories/Widgets/MyWidget.stories";
import { render, screen } from "@testing-library/react";

const { Default } = composeStories(MyWidgetStories);

test("Displays widget", () => {
    render(<Default/>);
    expect(screen.getByText("Run").toBeTruthy();
};

Story

import { Meta, StoryObj } from "@storybook/react";

import { expect, waitFor, within, userEvent, fn } from "@storybook/test";

import MyWidget from "../../UI/Widgets/MyWidget.tsx"

const meta: Meta<typeof MyWidget> = {
    title: "Components/Widgets/MyWidget",
    component: MyWidget
};
export default meta;

type Story = StoryObj<typeof MyWidget>;

const onClickMock = fn();

export const Default: Story = {
    args: {
        isVisible: true,
        onClick: onClickMock,
    },
    play async ({canvasElement}) => {
        const canvas = within(canvasElement);
        
        await userEvent.click(canvas.getByText("Run");
        
        await expect(onClickMock).toHaveBeenCalled();
    }
};

Storybook packages

@storybook/addon-actions: "8.4.5",
@storybook/addon-essentials: "8.4.5",
@storybook/addon-interactions: "8.4.5",
@storybook/addon-links: "8.4.5",
@storybook/blocks: "8.4.5",
@storybook/preset-create-react-app: "8.4.5",
@storybook/preview-api: "8.4.5",
@storybook/react: "8.4.5",
@storybook/react-webpack5: "8.4.5",
@storybook/test: "8.4.5"

main.ts

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

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["..\\public"],
  // Handle mocking
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
       "./getData$": path.resolve(__dirname, "..", "src/stories/DataFetch/getData.mock.ts"),
      };
    }
    return config;
  }
};
export default config;

Create a reproduction

No response

[cdedreuille]

You might have forgot to install the storybook package itself.