Mocking modules - I can't get it right

[romankoho]

Summary

Hello,

I am trying to setup storybook with particular attention to testing.
Obviously I've read the documentation.

I got MSW working for mocking away API calls.
Next up I want to mock away a custom hook but I just can't get it right.

I created a minimal reproduction repo. It includes a simple hook

export function useUser() {
  return {
    user: {
      name: 'Tommy Tellerlift'
    }
  }
}

in the preview.ts I setup the mock

sb.mock(import('../src/hooks/useUser'), { spy: true })

in the story I want to define the return value

const meta = {
  title: 'Posts',
  component: Posts,
  tags: ['autodocs'],
  beforeEach: () => {
    mocked(useUser).mockReturnValue({ user: { name: 'The mocked name' } })
  },
  parameters: {
    msw: {
      handlers: [
        http.get('https://jsonplaceholder.typicode.com/posts', () => {
          return HttpResponse.json(testData, { status: 200 })
        })
      ]
    }
  },
  decorators: [
    (Story) => (
      <div className={'h-full w-full bg-stone-900 p-6'}>
        <Story />
      </div>
    )
  ]
} satisfies Meta<typeof Posts>

this is the error I'm getting:

I guess it's something easy and stupid but maybe someone can help me (please).
Again here is the repo

Additional information

https://github.com/romankoho/storybook-test/tree/master

Create a reproduction

No response

[dosubot[bot]]

Hi @romankoho! I'm Dosu and I’m helping the storybook team.

The error mocked(...).mockReturnValue is not a function usually means the function you're trying to mock isn't actually a mock/spied function at runtime. Here’s a checklist to get Storybook’s module mocking working for your custom hook:

• In .storybook/preview.ts, register the mock with a relative path including the file extension (e.g. .ts), and make sure it matches exactly how you import it in your stories. For example:

  sb.mock(import('../src/hooks/useUser.ts'), { spy: true });

• In your story file, import the hook from the same path (with extension) as you used in sb.mock(). For example:

  import { useUser } from '../src/hooks/useUser.ts';

• Use the mocked utility from storybook/test to override the return value in beforeEach:

  import { mocked } from 'storybook/test';
  
  beforeEach: () => {
    mocked(useUser).mockReturnValue({ user: { name: 'The mocked name' } });
  }

• Do not use path aliases (like @/hooks/useUser) or omit the file extension—these will break the automocking system.

If you still see the error, double-check that:

• The export style matches (named export for useUser).
• The import path in both preview.ts and your story is identical and includes the extension.
• You are not calling sb.mock() in the story file (it must only be in preview.ts).

References:

• Storybook module mocking docs
• Example usage in stories

Try these steps and see if the error resolves. If not, please share the exact import lines from both your preview.ts and story file.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[alvaro-salort]

The issue is just how the hook is imported.

Even though sb.mock() spies on the module at runtime, if you do:

import { useUser } from '../src/hooks/useUser'

TypeScript still sees useUser as a normal function, not a mock, so mocked(useUser) fails.

You need to import the whole module instead:

import * as userHook from '../src/hooks/useUser'

Then mock it via the module:

beforeEach(() => {
  vi.spyOn(userHook, 'useUser').mockReturnValue({
    user: { name: 'The mocked name' },
  })
})

That way TypeScript and Storybook agree that useUser is actually a mock, and the error disappears.