刚刚遇到了同样的问题。我查看了源代码,Dialog 组件的 render 方法实际上创建了组件的一个实例RenderToLayer
。这个组件的行为就像一个门户,并通过在其渲染函数中返回 null 并直接附加到正文来破坏 react 的 DOM 树。
幸运的是,RenderToLayer
组件接受了 prop render
,这实质上允许组件向门户传递一个函数,以便在它处于渲染周期时调用。这意味着我们实际上可以自己手动触发这个事件。我承认,这并不完美,但经过几天的尝试,试图为这个 hack 找到解决方案后,我认输并像这样编写我的测试:
var component = TestUtils.renderIntoDocument(<UserInteractions.signupDialog show={true}/>)
var dialog = TestUtils.renderIntoDocument(component.refs.dialog.renderLayer())
var node = React.findDOMNode(dialog)
这是我的 UserInteractions.signupDialog 的样子:
exports.signupDialog = React.createClass({
...
render: function() {
var self = this;
return (
<div>
<Dialog
ref='dialog'
title="Signup"
modal={false}
actions={[
<Button
label="Cancel"
secondary={true}
onTouchTap={self.__handleClose}
/>,
<Button
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={self.__handleClose}
/>
]}
open={self.props.show}
onRequestClose={self.__handleClose}
>
<div className='tester'>ham</div>
<TextField id='tmp-email-input' hintText='email' type='text'/>
</Dialog>
</div>
)
}
})
现在我可以对对话框中呈现的子组件进行断言,甚至可以对绑定到我的原始组件的事件进行断言,因为它们的关系得到了维护。
如果您要继续使用材料 ui,我绝对建议您在测试堆栈中设置调试器。像这样的事情没有太多帮助。这是我的调试脚本的样子:
// package.json
{
...
"scripts": {
"test": "mocha --compilers .:./test/utils/compiler.js test/**/*.spec.js",
"debug": "mocha debug --compilers .:./test/utils/compiler.js test/**/*.spec.js"
}
}
现在您可以使用它npm test
来运行 mocha 测试,并npm run debug
进入调试器。一旦进入调试器,它将立即暂停并等待您输入断点。此时,输入c
继续。现在您可以debugger;
在代码中的任何位置放置语句以生成调试器将响应的断点。一旦它找到了你的断点,它将暂停并允许你使用本地范围来参与你的代码。此时, enterrepl
进入您的代码的本地范围并访问您的本地变量。
也许您不需要调试器,但也许其他人会发现这很有帮助。祝你好运,编码愉快!