我正在尝试执行 enzyme /摩卡/柴测试来模拟将 Material UI 复选框标记中的检查状态从 true 更改为 false，该标记由 redux-form 字段包装并呈现。我能够模拟对嵌套在 Field 标签内的 native 组件(复选框等)的点击，但无法在嵌套时模拟对 Material UI 标签的点击。我可以访问复选框标记上的其他属性，但无法模拟事件。
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 中触发的单击事件以注销到我的控制台。但我包含了几行注释掉的代码，这样一旦我可以在嵌套在字段中的复选框内进行单击事件以注销，您就可以看到我最终尝试使用它的位置。我不确定问题是否出在 enzyme 、redux-form 或 Material UI 上，但两者之间的相互作用不允许我模拟 enzyme 中的事件。
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
})
谢谢!
最佳答案
我遇到了同样的问题并在这里找到了答案: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');
关于reactjs - 嵌套在 redux-form Field 标签中时，无法模拟 enzyme 测试单击 Material ui 复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43808217/