無法模擬酶測試在材質UI上點擊複選框嵌套在REDX形式的字段標記中

我正在嘗試執行酶/摩卡/柴測試以模擬在材質UI中將檢查狀態從true更改爲false複選框標籤，由一個REDX表單字段包裝並呈現。我能夠模擬嵌套在Field標籤內部的本地組件（複選框等）的點擊，但無法在嵌套時模擬對材質UI標籤的點擊。我能夠訪問複選框標籤上的其他屬性，但無法模擬事件。無法模擬酶測試在材質UI上點擊複選框嵌套在REDX形式的字段標記中

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} 
    /> 
) 
}

和我的渲染功能裏面，有這個代碼塊這就要求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>

，這裏是我的測試 - 我不擔心指望然而，即使是，我只是在嘗試獲取在UserForm.jsx中觸發的點擊事件以註銷到我的控制檯。但是我包含了幾行註釋掉的代碼，所以你可以在嵌套在Field中的複選框內的單擊事件退出之後，最終看到我正在嘗試使用它的位置。我不確定問題是否與酶，還原形式或物質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 
    })

謝謝！

來源

2017-05-05 Vaughn Walters

我遇到同樣的問題，在這裏找到了答案：https://github.com/callemall/material-ui/blob/master/src/Checkbox/Checkbox.spec.js

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

來源

2017-05-19 04:04:49 user1736525

這爲我工作。但爲什麼我們需要'input.node.checked =！input.node.checked;'這裏？包裝的「複選框」和原生複選框之間是否有區別？ – wangzi6147

無法模擬酶測試在材質UI上點擊複選框嵌套在REDX形式的字段標記中

回答

相關問題