Mocking internal module does not work via "Builder aliases"

[unixhelloworld]

Summary

I encountered an issue where trying to mock an internal module using alias in the Vite configuration for Storybook does not work. Even though the path to the mock is correctly specified and Storybook compiles without issues, the original module is called instead of the mock.

Additional information

1. In the Storybook configuration (main.ts), an alias is added for the module:

viteFinal: async (config) => {
    config.resolve.alias = {
        ...config.resolve?.alias,
        '@/core/testModule': resolve(__dirname, './mocks/test.ts'),
    };
    return config;
}

2. A mock file is created at .storybook/mocks/test.ts:

const testModule = () => {
    console.log('Mocked test module called');
    return {
        someFunction: () => 'mocked result',
    };
};

export default testModule;

3. The original module is used in the component that I am trying to mock:

import testModule from '@/core/testModule';

const result = testModule();

4. When running Storybook and rendering the component, the original testModule is called instead of the mocked version.

---

Expected Behavior

The mocked version of the module defined through the alias in the Vite configuration should be used instead of the original one.

Actual Behavior

The original version of the module is used instead. The console does not log Mocked testModule called, indicating that the mock is not being applied.

---

Additional Information

Storybook version: ^8.3.4
Vite version: ^5.2.9
Vue version: ^3.4.15
Node.js version: 18.19.0
Operating System: MacOS Sequoia 15.0

---

Possible Causes and Solutions

The issue might be related to Vite not applying the alias for internal modules properly in Storybook.

I’ve tried restarting Storybook, clearing the cache, but the issue persists.

No response

[alasdair009]

Getting the exact same problem (I think) in #31207

[valentinpalkovic]

In Storybook 10.1, we have introduced module mocking:
https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules

Aliasing module, therefore, isn't required anymore, but the sb.mock method should be used instead.