ReactJs - MaterialUi - 按钮内部对话框

时间:2016-11-28 15:00:39

标签: reactjs tdd sinon material-ui enzyme

您好我有这个组件

class ConfirmDialog extends Component {
...
render() {

    const actions = [
        <FlatButton
            label="Cancel"
            primary={true}
            onTouchTap={this.handleClose}
            />,
        <FlatButton
            label="Submit"
            primary={true}
            keyboardFocused={true}
            onTouchTap={this.handleConfirm}
            />,
    ];

    return (
        <div>
            <Dialog
                title="xxx"
                actions={actions}
                open={this.state.open}
                onRequestClose={this.handleClose}
                >
            </Dialog>
        </div>
    );
}

我想从我正在使用的取消按钮模拟touchTap sinon jest +酶。 我尝试了很多解决方案但没有工作 我的考试......

const clickSpy = spy();

    const wrapper = mount(<ConfirmDialog
        openDialog={true}
        confirmDialog={clickSpy}
        />,
        { // Workaround https://github.com/callemall/material-ui/issues/5330
            context: { navigate: () => { }, muiTheme: getMuiTheme() },
            childContextTypes: { navigate: () => { }, muiTheme: React.PropTypes.object.isRequired }
        }
    );

    const cDialog = wrapper.find(Dialog);
    const cBtn = cDialog.find(FlatButton);
    cBtn.simulate('touchTap');

结果:

方法“模拟”仅用于在单个节点上运行。 0找到了。

  at ReactWrapper.single (node_modules\enzyme\build\ReactWrapper.js:1364:17)
  at ReactWrapper.simulate (node_modules\enzyme\build\ReactWrapper.js:751:14)
  at Object.<anonymous> (src\components\ConfirmDialog\ConfirmDialog.test.js:77:10)
  at process._tickCallback (node.js:369:9)

使用此版本

"sinon": "^1.17.6"
"material-ui": "^0.16.4",
"react": "^15.4.1",
"enzyme": "^2.6.0",

UPDATE1:

const cDialog = wrapper.find(Dialog).first();
const cBtn = cDialog.find('FlatButton').first(); 

结果

Method “simulate” is only meant to be run on a single node. 0 found instead.

log console.log(“cBtn”);的console.log(cBtn);

console.log src\components\ConfirmDialog\ConfirmDialog.test.js:76
  cBtn
console.log src\components\ConfirmDialog\ConfirmDialog.test.js:76
  ReactWrapper {
    component: null,
    root:
     ReactWrapper {
       component:
        { setChildProps: [Object],
          setChildContext: [Object],
          getInstance: [Object],
          getWrappedComponent: [Object],
          props: [Object],
          context: {},
          refs: {},
          updater: [Object],
          state: [Object],
          _reactInternalInstance: [Object] },
       root: [Circular],
       node:
        ConfirmDialog {
          props: [Object],
          context: {},
          refs: {},
          updater: [Object],
          handleClose: [Function],
          handleConfirm: [Function],
          mOpenDialog: true,
          state: [Object],
          _reactInternalInstance: [Object] },
       nodes: [ [Object] ],
       length: 1,
       options: { context: [Object], childContextTypes: [Object] },
       complexSelector:
        ComplexSelector {
          buildPredicate: [Function: buildInstPredicate],
          findWhereUnwrapped: [Function: findWhereUnwrapped],
          childrenOfNode: [Function: childrenOfInst] } },
    nodes: [],
    length: 0,
    options: {},
    complexSelector:
     ComplexSelector {
       buildPredicate: [Function: buildInstPredicate],
       findWhereUnwrapped: [Function: findWhereUnwrapped],
       childrenOfNode: [Function: childrenOfInst] } }

UPDATE2

const dialog = wrapper.find('Dialog').first();
const buttons = dialog.props('actions');
shallow(buttons[0]).simulate('touchTap');
shallow(buttons[1]).simulate('touchTap');  

RESULT-UPDATE2

TypeError: Cannot read property 'type' of undefined

  at ReactShallowRenderer.render (node_modules\enzyme\build\react-compat.js:153:30)
  at node_modules\enzyme\build\ShallowWrapper.js:90:26
  at ReactDefaultBatchingStrategyTransaction.TransactionImpl.perform (node_modules\react-dom\lib\Transaction.js:140:20)
  at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
  at batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at node_modules\enzyme\build\ShallowWrapper.js:89:41
  at withSetStateAllowed (node_modules\enzyme\build\Utils.js:224:3)
  at new ShallowWrapper (node_modules\enzyme\build\ShallowWrapper.js:88:38)
  at shallow (node_modules\enzyme\build\shallow.js:19:10)
  at Object.<anonymous> (src\components\ConfirmDialog\ConfirmDialog.test.js:66:51)
  at process._tickCallback (node.js:369:9)

0 个答案:

没有答案