반응형
재료 ui에서 효소 테스트 클릭을 시뮬레이션할 수 없음 환원 형태 필드 태그에 중첩된 경우 확인란
나는 재료에서 체크된 상태를 진에서 거짓으로 바꾸는 것을 시뮬레이션하기 위해 효소/모카/차이 테스트를 수행하려고 한다.Redex-form Field에 의해 래핑되고 렌더링된 UI 확인란 태그.필드 태그 내부에 중첩된 네이티브 구성요소(체크박스 등)의 클릭을 시뮬레이션할 수 있지만, 중첩된 경우 재료 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}
/>
)
}
그리고 내 렌더 함수 안에는 렌더Checkbox를 호출하는 코드 블록이 있다.
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에서 발사되는 클릭 이벤트를 얻으려고 한다.그러나 필드에서 중첩되어 로그아웃할 수 있는 Checkbox 내의 클릭 이벤트를 만들 수 있는 경우, 코드의 몇 줄을 코멘트 코드에 포함시켜 최종적으로 내가 원하는 위치를 확인할 수 있도록 했다.효소, 환원제 형태 또는 물질 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
})
고마워!
나는 같은 문제에 부딪혔고 여기서 답을 찾았다: 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');
반응형
'IT이야기' 카테고리의 다른 글
| Ract Native(원본 반응)에서 입력이 초점을 잃거나 흐릿함을 방지할 경우에도 키보드를 계속 열어둘 수 있는 방법이 있는가? (0) | 2022.03.26 |
|---|---|
| vue js에서 소품으로 기능 전달 (0) | 2022.03.26 |
| Vue.js - Vuex를 사용하여 동적 사이드바 사고 방식(Navbar에서 사이드바까지) 열기/닫기 (0) | 2022.03.26 |
| vuejs 라우터의 선택적 매개 변수 (0) | 2022.03.26 |
| Python에서 HTTP 요청 및 JSON 구문 분석 (0) | 2022.03.26 |