효소로 '변경'을 시뮬레이션 한 후 체크 박스가 선택되지 않았습니다.

Question

체크 박스에 change 이벤트를 시뮬레이트하기 위해 효소를 사용하려고 시도했는데, 체크 된 경우 어서 트하기 위해 chai-enzyme을 사용합니다. 이것은 내 Hello입니다

는

구성 요소를 반응 :

import React from 'react'; 

class Hello extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     checked: false 
    } 
    } 

    render() { 
    const {checked} = this.state; 
    return <div> 
     <input type="checkbox" defaultChecked={checked} onChange={this._toggle.bind(this)}/> 
     { 
     checked ? "checked" : "not checked" 
     } 
    </div> 
    } 

    _toggle() { 
    const {onToggle} = this.props; 
    this.setState({checked: !this.state.checked}); 
    onToggle(); 
    } 
} 

export default Hello; 

그리고 내 테스트 :이 테스트를 실행하면

import React from "react"; 
import Hello from "../src/hello.jsx"; 
import chai from "chai"; 
import {mount} from "enzyme"; 
import chaiEnzyme from "chai-enzyme"; 
import jsdomGlobal from "jsdom-global"; 
import spies from 'chai-spies'; 

function myAwesomeDebug(wrapper) { 
    let html = wrapper.html(); 
    console.log(html); 
    return html 
} 

jsdomGlobal(); 
chai.should(); 
chai.use(spies); 
chai.use(chaiEnzyme(myAwesomeDebug)); 


describe('<Hello />',() => { 

    it('checks the checkbox',() => { 
    const onToggle = chai.spy(); 
    const wrapper = mount(<Hello onToggle={onToggle}/>); 

    var checkbox = wrapper.find('input'); 
    checkbox.should.not.be.checked(); 
    checkbox.simulate('change', {target: {checked: true}}); 
    onToggle.should.have.been.called.once(); 

    console.log(checkbox.get(0).checked); 
    checkbox.should.be.checked(); 
    }); 

}); 

의 checkbox.get(0).checked는 false, 그리고 주장 checkbox.should.be.checked() 보고서 오류 :

AssertionError: expected the node in <Hello /> to be checked <input type="checkbox" checked="checked"> 

예를 들어 출력에 이미 checked="checked"이 있으므로 메시지가 이상합니다.

너무 많은 것들이 포함되어 있기 때문에 어디서 잘못되었는지는 잘 모르겠습니다. 정확히 동일한 테스트 :

나는 또한 주변에 검색을 작성하는 동안 나는 정확히 같은 문제를 건너 왔어요, these lines

Answer 1

funnny 우편 통지, https://github.com/js-demos/react-enzyme-simulate-checkbox-events-demo :

또한 여기 데모 프로젝트를 볼 수 있습니다 매우 만족스럽지 않더라도 내가 찾은 대답은 분명합니다.

버그는 아니지만 "설계대로 작동합니다".

효소의 기초는 반응 테스트 유틸리티를 사용하여 특히 시뮬레이션 API와 반응합니다.

시뮬레이션 실제로 DOM을 업데이트하지 않습니다, 그것은 단지 내가 여기있어 대답 (https://github.com/facebook/react/issues/4950)이 있기 때문입니다에 따르면. 당신이 전달 추가 매개 변수와 가능성, 컴포넌트에 연결된 이벤트 처리기 반응 트리거

돔을 업데이트하려면 React가 많은 브라우저 기능을 다시 구현해야합니다. 예상치 못한 동작을 유발할 수 있으므로 브라우저를 사용하여 업데이트를 수행하기로 결정했습니다.

실제로 이것을 테스트하는 유일한 방법은 직접 DOM을 수동으로 업데이트 한 다음 시뮬레이트 API를 호출하는 것입니다.

Answer 2

나는 나의 설명의 세부 사항 중 일부는 조금 잘못된 것 같아요,하지만 내 이해는 다음과 같습니다

당신은 그것은 checkbox에서 그 효소 노드에 대한 참조를 저장

var checkbox = wrapper.find('input'); 

할 때,하지만 효소 나무가 새롭게 되더라도 checkbox는 아닙니다. 트리의 참조가 변경되고 따라서 checkbox이 트리의 이전 버전에있는 노드에 대한 참조이기 때문에 이것이 맞는지 모르겠습니다.

checkbox을 만드는 기능은 나를 위해 작동하게 만드는 것 같습니다. 이제 checkbox()의 값은 항상 최신 트리에서 가져옵니다.

var checkbox =() => wrapper.find('input'); 
checkbox().should.not.be.checked(); 
checkbox().simulate('change', {target: {checked: true}}); 
///...