javascript - 使用 NormalModuleReplacementPlugin 从实际文件中获取

Question

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

我的最终目标是让子组件永远处于“加载状态”，因此 模拟服务器响应不是这里的解决方案。

我想出的方法是用 stub 的 Thunk Action 创建器替换我的 Thunk Action 创建器。类似于我们在 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 替换为包含函数但主体为空的 stub 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
}

问题是我只需要对 thunk Action 创建者进行 stub ，文件中的其他所有内容(其他 Action 和 reducer)都需要相同。

这是我迄今为止考虑过的解决此问题的方法:

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

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

当我使用 NormalModuleReplacementPlugin 时，有什么想法可以从 stub 模块访问实际模块吗？

更新 1:2019-07-08

Tarun 关于仅模拟获取函数并返回 new Promise() 的建议适用于“无限期加载”的特殊情况。

但是，纵观全局，我仍然宁愿将所有 API 调用 stub ，这样我就可以通过修改 redux 状态来设置故事。

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

如果程序员可以仅使用领域模型知识来工作和设置测试用例，而不需要知道服务器响应 JSON 结构，我会更好。不用说，app redux store 结构就是领域模型。

所以我仍然需要一个关于在使用 NormalModuleReplacementPlugin 时如何从实际文件中请求的答案。

Answer 1

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

为此，将您的实际模块导入 ./ducks/stubs/students.js，从该模块导出所有内容，然后定义/覆盖 loadResources() 和也导出它。然后，您可以像往常一样使用 NormalModuleReplacementPlugin 并将您的 stub 文件作为 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. 您可能必须更新导出以使用let 与const(没什么大不了的)
2. 根据 this issue ，export * from 表达式不应处理 default 导出。因此，您可能必须添加 export { default } from './ducks/students.js';。当然，请记住，您将无法导出 stub 文件的 native 默认函数(当然，除非您使用 stub 覆盖原始 default 函数)。