嵌套在redux形式的Field标签中时，无法模拟材料UI复选框上的酶测试点击

Question

嵌套在redux形式的Field标签中时，无法模拟材料UI复选框上的酶测试点击

Vau*_*ers 2 reactjs material-ui redux-form enzyme react-redux

我正在尝试进行酶/摩卡/柴的测试，以模拟在materialUI Checkbox标记中将检查状态从true更改为false的情况，该标记包装在redux形式的Field中并由其呈现。我能够模拟对嵌套在Field标签内部的本机组件（复选框等）的点击，但是当嵌套时，无法模拟对材质UI标签的点击。我能够访问Checkbox标记上的其他属性，但是无法模拟事件。

UserForm.jsx   

renderCheckbox(props) {
  return (
   <Checkbox
      label={props.label}
      value={props.input.value}

// working code in the app:
      onChange={ event => {
      this.props.actions.toggleSuperAdmin(props.input.value)}}

// test code, not able to simulate even this click in Enzyme, 
// tried to break function down into simplest event I could think of, 
// and still not functioning in the test:               
      onCheck={() => console.log("onClick in UserForm.jsx")}

      {...props.input}
   />
  )
}

Run Code Online (Sandbox Code Playgroud)

在我的render函数内部，有这段代码调用了renderCheckbox

    UserForm.jsx  

    render() {
        return (
          <Paper zDepth={0} rounded={false}>
            <form id='user-form' onSubmit=
    {this.props.handleSubmit(this.handleUserSubmit.bind(this))}>
              <Field name='is_super_admin' 
                component={this.renderCheckbox} 
                label='Work Institute Employee / Super Admin'/>
            </form>
          </Paper>

Run Code Online (Sandbox Code Playgroud)

这是我的测试-我什至不担心期望，我只是想获取UserForm.jsx中触发的click事件以注销到控制台。但是我包括了几行注释掉的代码，因此一旦我可以在嵌套在“字段”中的Checkbox内单击事件单击退出，就可以最终看到我尝试将其使用的代码。我不确定问题是否出在酶，redux形式或材料UI上，但是两者之间的相互作用不允许我模拟酶中的事件。

import ConnectedUserForm, { UserForm } from '../../../www/components/UserForm'
import { expect, shallow, render, React, sinon, mount } from '../../_utils'
import jwt from 'jsonwebtoken'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Field } from 'redux-form/immutable'
import Checkbox from 'material-ui/Checkbox';
import Paper from 'material-ui/Paper'  
import { reducer as formReducer } from 'redux-form'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import jsdom from 'jsdom'

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.window = document.defaultView

it('toggleSuperAdmin function should fire when checkbox is checked', () => {
props.user.is_super_admin = 1

let store = createStore(combineReducers({ form: formReducer }))
const userForm = mount(
  <Provider store={store}>
     <ConnectedUserForm {...props} />
  </Provider>, options)

const checkB = userForm.find(Checkbox)

checkB.simulate('check')

// console.log("checkB1", checkB.getNodes()[0].props);

// checkB.simulate('change', {target: { isInputChecked: true }})

// console.log("checkB2", checkB.getNodes()[0].props);

//    expect(props.actions.toggleSuperAdmin.calledOnce).to.be.true
  })

Run Code Online (Sandbox Code Playgroud)

谢谢！

Answer 1

use*_*525 5

我遇到了同样的问题，并在这里找到了答案：https : //github.com/callemall/material-ui/blob/master/src/Checkbox/Checkbox.spec.js

  const input = wrapper.find('input');
  input.getDOMNode().checked = !input.getDOMNode().checked;
  input.simulate('change');

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	2619 次
最近记录：	6 年前