Storybook integration not working

[saintplay]

Hi,

I'm trying to use rewiremock inside my storybook with react project, but is not working.

I only get a error in the console, but not a useful one.

TypeError: "parent is undefined"
    _resolveFilename module.js:9
    _resolveFilename module.js:60
    fileNameTransformer nodejs.js:18
    resultName plugins.js:39
    convertName plugins.js:37
    mockModule mockModule.js:70
    proxy mockModule.js:181
    proxy mockModule.js:180
    inScope mockModule.js:222
    proxy mockModule.js:177
    js index.js:5
    js main.fea5ca72b2eb7cf739c0.bundle.js:52
    Webpack 18

I tried in a clean environment with a fresh installs and the error still persists

Clean Reproduction Repo: https://github.com/saintplay/rewiremock-storybook-bug

I didn't forget to add the three plugins required, and the babel plugin.

Steps to Reproduce

• yarn install
• yarn storybook
• Open localhost:9009 (no build error, but runtime error)

Hope you can help to solve this use case, thanks

UPDATE

After some tweaking I managed to get this working. Example code here

[theKashey]

So there is multiple issues here:

• storybook v5 is adding HotModuleReplacementPlugin by their own. This duplication leads to parents being empty. Remove HotModuleReplacementPlugin from your config.
• you are mocking ./Lobby which does not exists. replace by ./ComponentExample
• you cannot mock files not present on the file system. It's not a problem for nodejs, where your files system is your file system, but for webpack that's crucial.
  import files you want to mock anywhere.

import './lib';
import './ComponentExample';

• as long as it's easy to forget to do - try to use guided mocks as long as they are solving issues above

const ComponentExample = rewiremock.proxy(() => require("./ComponentExample"), () => {
  rewiremock(() => require("./lib")).with({
    COUNT: 100
  });
}).default;

In the same time :) there are two bugs in rewiremock which will not allow you to do it. Give me a few hours to fix them.

[ ] - main chunk has no name and causing path.resolve to fail
[ ] - webpack entrypoint does not support mockery interface.

[saintplay]

Sorry, I didn't read guided mocking, I fixed the repo code.

Also I don't need to

import '.lib'
import '.ComponentExample'

since we are requiring them inside the proxy, right?

[theKashey]

Yep. But rewiremock(...) will not work with /webpack endpoint, which you actually don't have to use with guided mocking (require).

Switch to just rewiremock, and it should work out of the box.

[saintplay]

I changed the webpack import to default import and it worked!

In the same time :) there are two bugs in rewiremock which will not allow you to do it. Give me a few hours to fix them.

So is there something to still fix?

[theKashey]

You know - I don't know. These bugs existed just after fresh install, but later I could not reproduce them. They were related to a chunk 0 being 0, and I have to idea what it was - all chunks are named, or/and starts from 1.
That mean - I don't know how to reproduce them, but I know how to fix them.

[saintplay]

maybe deleting node modules and yarn lock. I didn't get those

[saintplay]

I've been using this, and works just fine. It even replace the modules in nested components

This is the code for future reference

import React from "react";
import rewiremock from "rewiremock";
import { storiesOf } from "@storybook/react";

import { datbaseMock, serviceMock } from './mocks';

const ModifiedProfile = rewiremock.proxy(
  () => require("./Profile"),
  () => {
    rewiremock(() => require("./service")).with(serviceMock);
    rewiremock(() => require("./database")).with(databaseMock);
  }
).default;

storiesOf("Profile View", module).add("default state", () => <ModifiedProfile />);

When you do this, you lose hot reloading, but I believe this will happen with any mocking library.

I think is safe to close this now

[theKashey]

I’ll double check hot loading ;)