单元测试使用Material UI Dialog React组件

我目前正在为我的React + MaterialUi应用程序编写单元测试.

在我的应用程序中,我有一个Dialog.我想确保取决于按下对话框上的按钮:

内部状态相应地改变.

不幸的是,我无法使用TestUtils.scryRenderedComponentsWithType(FlatButton)
或
scryRenderedComponentsWithTag("button")
等等来获取对话框内容 .

关于如何测试流量的任何想法？

更新1

所以,我可以通过调用TestUtils.scryRenderedComponentsWithType(对话)取得对话实例.但我无法得到对话框的内容.DOM明智的内容不会在视图内部呈现.它在文档级别(div)上的新创建节点中呈现.所以我试过这个:

let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);

上面的例子中的cancelButton是正确的DOM元素.但是,Simulate.click不会触发组件单击功能.

对乔纳斯说

刚遇到同样的问题.我查看了源代码,Dialog组件的render方法实际上创建了一个组件实例RenderToLayer.此组件表现为门户网站,并通过在其"渲染函数"中返回null并将其直接附加到正文来中断反应的DOM树.

幸运的是,RenderToLayer组件接受prop render,它实质上允许组件将一个函数传递给门户,当它处于渲染周期时.这意味着我们实际上可以自己手动触发此事件.我承认,这并不完美,但经过几天的努力寻找解决方案后,我正在试着写下我的测试:

var component = TestUtils.renderIntoDocument()
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 (
      

        
,
            
          ]}
          open={self.props.show}
          onRequestClose={self.__handleClose}
          >
          
ham
          
        
      
    )
  }
})

现在我可以对对话框中呈现的子组件进行断言,甚至可以对与原始组件绑定的事件进行断言,因为它们的关系得以维持.

如果您要继续使用材料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;在代码中的任何位置放置语句,以生成调试器将响应的断点.找到断点后,它会暂停并允许您使用本地范围使用代码.此时,输入repl以输入代码的本地范围并访问本地变量.

也许你不需要调试器,但也许别人会觉得这很有帮助.祝你好运,编码愉快!