node.js - 如何使用 webpack 手动测试 react 组件？

Question

我知道我们应该对我们的reactjs组件使用单元测试。但我还想要的是某种方式来单独手动测试我们的组件。因为我们正在进行小冲刺，我们必须在页面首先使用该组件之前交付一些完成的组件。我希望看到完整的组件真正起作用（即测试与 css 和子组件的集成）。

因此，首先，我希望看到在黑页中呈现的新组件不需要直接使用该组件，而是从查询字符串参数中获取该组件名称/路径。然后我计划向该页面添加一些通用组件配置（例如，带有 json 的文本框表示要传递给该组件的道具）。

我现在面临的第一个问题是关于如何配置webpack、webpack-dev-middleware或webpack-dev-server以能够加载通过参数传递的组件。

有人知道怎么做吗？或者更好的方法来处理这个？

Answer 1

我会尝试这样的事情：

1. 设置一个使用require.context的入口点。
2. require根据您的查询字符串在该上下文中调用。你现在应该有你的 React 组件了。通过 React 渲染它。

为了生成测试控件，我将使用JSON Schema在组件中包含元数据。然后可以使用一些表单生成器来生成表单控件，例如plexus-form或tcomb-form。