Storybook: Be able to mock global functions, e.g. to mock React hooks dependencies

[dmaksimovic]

Is your feature request related to a problem? Please describe.
We often cannot run a storybook around some component which uses React hooks to fetch some data, e.g. useQuery or useMutation from the Apollo library. It fails because there is no Provider, and Apollo provider is not that easy to set up. Even when set up, it needs to be mocked, which Apollo has some support for, but some other libs don't.

Describe the solution you'd like
Not only for hooks, but also for some other component dependencies, it would be very convenient to have something like Jest has, to be able to mock a function globally, like e.g. https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options. Something like storybook.mock. I think this could be possible because we run a storybook process, just like jest does.

Describe alternatives you've considered
When the data is coming from e.g. the useContext, it is fairly easy to circumvent, but it is still frustrating, because the only solution we currently see is to wrap each story into some fake Provider.

Are you able to assist bring the feature to reality?
I have not had any contribution to Storybook so far, and I could find some time to try, but I am afraid this would be an advanced task.

Additional context
-no screenshots-

[tmeasday]

Hi @dmaksimovic -- I think it is possible to do this with a custom webpack config that aliases the import (e.g. aliases react-apollo to your own mock version).

Having said that, I agree first class support for this in SB would be really cool. Do you have thoughts on an API for it?

[tooppaaa]

An option for this exact use case could be https://github.com/mswjs/msw.
There has been experiment to add this to Storybook by @yannbf.

If i'm right, msw starts asynchronously but our stories are synced. I think your work @tmeasday on async stories will unlock the use of that tool and ensure same data for unit test / storybook usage.

Having a mock mechanism in storybook might sound too much, What do you think ?

[dmaksimovic]

Hi @dmaksimovic -- I think it is possible to do this with a custom webpack config that aliases the import (e.g. aliases react-apollo to your own mock version).

Having said that, I agree first class support for this in SB would be really cool. Do you have thoughts on an API for it?

Im afraid i don't. I've only been consumer of storybook for 3 years in 2 different companies but i have zero knowledge on its source and architecture. This issue is basically an obstacle to our team for using storybook, as we more and more shift to hook based components, and i only imagine we're not the only one's, as Facebook is pushing everybody in this direction. Service workers and custom webpacks could be a strong argument for those who oppose using storybook as it would become an overkill.

[tmeasday]

@dmaksimovic I guess what I meant was how do you imagine using such a feature?

[tim-mccurrach]

@yannbf It's mentioned in a comment above that you have worked on adding msw to storybook. This sounds like a really great development. What is the status of this work? (an experiment that might be built on later? / one that will probably be discarded? / is already completed?).

It goes without saying, I don't mean any pressure in asking this. I'm just excited by the prospect, regardless of the status of the work.

Thanks :)

[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!