Storybook: Feature request: Mock imports

[lifeiscontent]

Is your feature request related to a problem? Please describe.

One thing I've noticed is I find myself mocking a lot of imports, e.g. if I am using apollo, I use the MockedProvider in storybook, or if I'm using next.js I will mock the next/router.

in jest, I can just do jest.mock('next/router') and it'll load a file from __mocks__/next/router.js

it would be nice if storybook could do this as well because then I wouldn't have to rearrange code just to make it easier to test in storybook.

Describe the solution you'd like

an API to mock imports and provide stubs in a different file

Describe alternatives you've considered
None, as this is a pretty clear solution to a problem

Are you able to assist bring the feature to reality?
maybe, I don't have a ton of experience with webpack, but I imagine that is where a portion of this feature would stem from.

Additional context
N/A

[lifeiscontent]

Just to shed some more light on why I think this feature should exist, I just recently created an example app in next.js and in order to test the full pages in the project, I ended up having to re-export all the pages so I could import them into storybook without having an apollo client trying to send API calls to production: https://github.com/lifeiscontent/realworld/tree/master/web/src/pages

[shilman]

Love this feature and think it could make Storybook a lot more powerful. Let's figure out how to make it happen!

It should be pretty easy to mock something globally and then provide a convenience function for accessing the currently rendered story ID, as an 80/20 solution.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[JuanCaicedo]

Hi! I'm new to this issue 😄 Makes me wonder if it would be possible to do this by tapping into storybook's custom webpack config.

My thinking is the dependency could be mocked out leveraging something like webpack shims.

One tricky thing is that the webpack config is exposed in the storybook settings, but most likely the user would like to define mocks inside their stories. Those two mechanism would probably need a way to communicate 🤔

Just thinking out loud here!

[nickdandakis]

Just pulled this off with a custom Storybook Webpack config, and a Webpack alias.

Example .storybook/main.js:

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: async (config) => {
    config.resolve.alias['next'] = path.resolve(__dirname, './mockNext');
    return config;
  }
};

Example .storybook/mockNext/link.js:

function MockLink({
  href,
  children,
  ...props
}) {
  return (
    <a href={href} {...props}>
      {children}
    </a>
  );
}

export default MockLink;

I'm mocking Next's Link component here, but you should be able to mock any import with this pattern.
Unsure if Storybook needs an API for this, but might be useful to add this pattern to the docs if @shilman approves.