Are there any plans to try to support rewiring node_module imports?

[glomotion]

Thank you for putting this plugin into the world. It solves a big problem for us (mocking/rewiring modules inside cypress tests).

I wonder, are there any plans to allow this plugin to rewire node_modules imports?

[asapach]

I've intentionally avoided mocking imports, because I haven't found a safe way to make it work and keep the ESM live bindings. So the short answer is: it's out of scope of this plugin.

The long answer is: depending on your environment you should be able to mock either the exports or entire modules yourself. For example Jest has jest.mock(). Or if you're using webpack and the node module in question is authored in ESM you could configure babel-loader to transpile it and let the plugin rewire its exports, just as you would with your own code.

[glomotion]

mmmm interesting. We're using cypress for tests, so sadly that means jest.mock() is probably out of the question. I should be able to get into nextjs's webpack config and include particular node_modules into the babel transpile - so that idea might just work! will give it a try! Thank you!

[glomotion]

@asapach out of interest, should this be enough to tell babel-loader to transpile an npm component (the npm component that we want to re-wire is @imtbl/design-system)?

For some reason i'm still not able to see the rewire$xxx exports from the DS. :(

https://github.com/glomotion/stripped-down-next-rewire-ts/blob/tryout/rewire-exports/next.config.js

src/components/Moo/Moo.cy.test.jsx

import * as moo from "@imtbl/design-system";
console.log("@@@@@@@", moo); // Module containing all the usual exports, no rewire$xxx exports. :(

[asapach]

I'm not familiar with next internals, so it's hard for me to debug what's going on there, but if you install babel-loader this config works:

config.module.rules.push({ test: /@imtbl/, use: 'babel-loader' });

In your component you need:

import { SimpleText } from "@imtbl/design-system";

And in your tests:

import { rewire$SimpleText } from "@imtbl/design-system";

[glomotion]

thanks again @asapach. 🙏 Ill give that a whirl!

[glomotion]

So @asapach, apologies for the stupid questions, but im now doing precisely as above - and now can import the "rewire$SimpleText" function, but calling it doesnt seem to affect the module. 🤔

const Stubbed = () => {
  console.log("@@@@@@@@@@@@@");
  return <section>this is a stub DS component</section>;
};

describe("rewire tests", () => {
  beforeEach(() => {
    rewire$demoFunction(() => "holy smokes batman!");
    rewire$useSimpleHook(() => ({ number: 48 }));
    rewire$demoObject({ aww: "yeah!" });
    rewire$demoString("i can totally rewire");
    rewire$SimpleText(Stubbed);
   //  rewire$SimpleText(() =>  <section>this is a stub DS component</section>); // doesnt work either. :(
  });

  it("test out rewire", () => {
    mount(<Moo name="POW!" />);
    cy.contains("48").should("exist");
    cy.contains("this is a stub DS component").should("exist"); // fails. :(
  });
});

Am i doing something obviously wrong?

[asapach]

The first obviously wrong thing is the import in your component: https://github.com/glomotion/stripped-down-next-rewire-ts/blob/78d931d8c9e9c977a9649a6db92d8457d19ce59d/src/components/Moo/Moo.component.tsx#L2

-import { SimpleText } from "@imtbl/design-system/dist/minified";
+import { SimpleText } from "@imtbl/design-system";

[glomotion]

🤦 did that trying to debug last week and forgot about it. How embarrassing.

[glomotion]

@asapach apologies (again!) for stupid questions 🤪 , but it seems that something internally inside nextjs has changed, and the technique we have been using to force particular node_modules through ur babel plugin:

config.module.rules.push({ test: /@imtbl/, use: defaultLoaders.babel });

Now seems to break all @emotion/css based styling functionality. 🤔

Anything that tries to use emotion code errors out with:

  > _c is not defined

I wonder have you any other suggestions for things we might try? Updated repo is: https://github.com/glomotion/stripped-down-next-rewire-ts

Removing that config.module.rules entry from ./next.config.js fixes the style issues, but ofcourse then we can no longer axs the rewire$x exports. :(

---

EDIT: OK so It turns out that we just dont need the emotion babel plugin when inside tests, so we can just not use this babel plugin when running tests, and then we are free to use rewire-exports as we please! WIN!