reactjs - react-dnd + proxyquire -> Invariant Violation：在上下文 MyComponent 中找不到拖放管理器

Question

我一直在使用 proxyquire 来存根子组件和存储，但遇到了包含在 react-dnd 上下文中的组件的不变违规。

警告：上下文类型失败：在 DragSource(Card) 中未指定所需的上下文 dragDropManager。错误：不变违规：在 Card 的上下文中找不到拖放管理器。确保使用 DragDropContext 包装应用程序的顶级组件。阅读更多： http: //gaearon.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context

我整理了一个 repo 来演示错误：请参阅https://github.com/cmelion/react-hot-boilerplate/tree/Invariant-Violation-DND

运行它执行

npm install 
npm test

Answer 1

虽然我不完全理解为什么，在 proxyquire 返回的存根上设置“存根 ['@global'] = true” 触发了不变违规。

不设置 @global 会阻止 React.TestUtils 正常工作，再次不确定为什么。

最终的解决方案是使用布尔值有条件地设置@global 并回退到旧的querySelectorAll 的组合。

const subComponent = React.findDOMNode(comp).querySelectorAll('.simple-subcomponent');
should(subComponent.length).equal(1);

repo 已经更新了测试用例，这些测试用例说明了“正常”proxyquire 存根和“特殊”用例之间的区别。