使用NormalModuleReplacementPlugin从实际文件中获取

Question

我有一个Storybook设置，我需要我的React组件的子组件停止进行API调用。设置非常复杂，并且与问题无关，所以我只想说我需要组件来停止进行API调用。

我的最终目标是使子组件永远保持在“加载状态”，因此 嘲笑服务器响应不是这里的解决方案。

我想出的方法是将我的Thunk动作创作者替换为残缺的创作者。与我们在Jest单元测试中所做的相似

// note that I'm using redux ducks: https://github.com/erikras/ducks-modular-redux

jest.mock('./ducks/students');

当然，由于Storybook不在Jest上运行，因此上述方法不起作用。所以我目前的做法是使用NormalModuleReplacementPlugin来代替真正的模块ducks/students.js有一个存根ducks/stubs/students.js其中所包含的功能，但有一个空的身体：

// ./ducks/students.js
export const loadResources() = fetch('/resources');

export default (state, actions => {
  // reducer's body
}


// ./ducks/stubs/students.js
export const loadResources() = Promise.resolve();  // STUBBED

export default (state, actions => {
  // reducer's body
}

问题在于，我只需要对笨拙的动作创建者进行打桩，文件中的其他所有内容（其他动作和reducer）都必须相同。

到目前为止，这是我考虑过的解决方法：

• 将其余的实际文件复制/粘贴到存根的文件中。这不会扩展。
• 尝试使用require.requireActual()。原来这是一个Jest自定义函数，所以我不能在Storybook上使用它。

理想情况下，我可以找到一种方法将所有内容从实际模块导入到存根模块，然后导出存根函数和我需要的其余实际函数。

有什么想法可以在使用时从存根模块中访问实际模块NormalModuleReplacementPlugin吗？

更新1：2019-07-08

Tarun建议仅模拟fetch函数并new Promise()针对“无限加载”的特殊情况返回工作。

但是，从总体上看，我仍然只想保留所有API调用，以便我可以通过修改redux状态来设置故事。

“但是为什么不能仅仅模拟JSON响应呢？” 我听到你问。JSON响应不一定与应用程序域模型进行一对一映射。我们有负责转换的映射器功能。

如果程序员可以只具有域模型知识就能工作和设置测试用例，而又不需要知道服务器响应JSON结构，那将更好。不用说，应用程序redux存储结构是域模型。

因此，当使用时，我仍然需要一个有关如何从实际文件中进行要求的答案NormalModuleReplacementPlugin。

Answer 1

我还没有对此进行测试，但您也许能够通过聚合/重新导出模块语法并覆盖您的函数来实现您想要的loadResources()目标。

为此，请将实际模块导入到 中./ducks/stubs/students.js，从该模块中导出所有模块，然后定义/覆盖loadResources()并导出它。然后，您可以NormalModuleReplacementPlugin照常使用并传入存根文件，因为newResource它将包含您想要保留的所有实际模块缩减器/操作，并覆盖和存根掉 thunk：

//ducks.stubs.students.js

export * from './ducks/students.js';

//override students.loadResources() with our stub
//order matters as the override must come after 
//the export statement above
export const loadResources() = //some stubbed behavior;

//webpack.config.js

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /ducks\.students\.js/,
      './ducks.stubs.students.js'
    )
  ]
}

此解决方案的一些注意事项/警告/陷阱：

1. 您可能需要更新导出才能使用letvs. const（没什么大不了的）
2. 根据此问题，export * from表达式不应该处理default导出。因此，您可能必须添加export { default } from './ducks/students.js';. 当然，请记住，您将无法导出存根文件本机的默认函数（当然，除非您使用default存根覆盖原始函数）。