环境：我有一个非常复杂、反应很大的组件，基本上代表一个电子表格，我需要在其中突出显示一些单元格。它消耗了30个属性，这些属性是从redux连接HOC和用于渲染的地方传递的。其中一些属性是复杂的对象。
因此，再次反应组件很大，需要大量复杂的输入作为道具。
需要：我需要测试我的更改是否在中应用了特定的类具体地点。因此，我需要渲染这个组件，并为它提供将导致单元格高亮显示的数据。
问题：是否有可能以可用于测试代码的形式从实时页面获取道具？
已知限制：
- 当构建组件或调用某个生命周期方法时，我可以设置断点并检查属性，但Chrome开发工具会修剪冗长的输出。考虑到我有复杂的对象作为属性，我得到了这些对象的截断表示
- 我尝试过
JSON.stringify对象和console.log对象，但控制台中的字符串也以三个点结束(所以它被剪切了(
组件不能太大以至于很难测试。如果可以的话，把它打破。这是根本原因
在我无法在几个月内重写所有内容的现实中，我找到的解决方案是手动创建所有需要的属性。这是：
- 您可以在代码中看到您实际作为属性放在那里的内容
- 您只输入了必需的数据
- 当您控制并看到更改时，您可以看到组件是如何更改的
- 带有数据的快照和辅助文件的大小尽可能小
=======
我找到了一条可能的道路，但也有缺点。
要获取具有周期依赖性的数据，可以使用https://www.npmjs.com/package/flatted.
- 转到
flatted项目的github，复制代码并粘贴到Chrome开发控制台中 - Chrome中React Dev Tools中的开放组件
- 按组件名称查找，将所需的
props保存为控制台中的全局变量(右键单击属性名称( - 使用
flatted展开对象并将其作为字符串复制到项目中 - 在项目中导入
flatted，使用它从Chrome开发工具解析字符串化版本 - 在测试中使用数据
缺点：
- 您可以访问(您可以在编辑器中看到(字符串化版本的数据，但不能推理和更改。这意味着，在某种程度上，你会盲目地对巨大的物体进行操作(你的测试可能需要对数据进行五级深度的更改(
- 这个字符串化版本的大小可能很大，若您要进行快照测试，这意味着您将在几个文件中拥有如此庞大的数据
- 你需要体力劳动；黑/灰盒"；更改时进行测试：获取新数据，确保所有测试都使用此新数据，等等