酵素で「変更」をシミュレートした後にチェックボックスがチェックされていません

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"> 

eは出力に既にchecked="checked"があるので、メッセージはかなり奇妙です。

あまりにも多くのことが関係するので、どこが間違っているのか分かりません。

あなたがここにもデモプロジェクトを見ることができます：まったく同じテストを書くことを試みている間https://github.com/js-demos/react-enzyme-simulate-checkbox-events-demo、予告these lines

Answer 1

Funnnyを、私は正確に同じ問題に出くわした:)

また、私はそれのために周りを検索それほど満足していなくても、私が見つけた答えはかなり明確です。

バグではなく、「設計どおりに動作します」。

基礎をなす酵素は、特にシミュレートapiと反応する反応試験用のユーティリティを使用します。シミュレートが実際にDOMを更新しません

、それは単に、おそらくあなたがに渡す追加のパラメータを使用して、コンポーネントに添付イベント・ハンドラを反応させるトリガー。

私はここ（https://github.com/facebook/react/issues/4950）得た答えによると、この理由は、 domを更新するにはReactに多くのブラウザ機能を再実装させる必要があります。予期せぬ動作が発生する可能性があるため、ブラウザに依存して更新を行うことにしました。

これを実際にテストする唯一の方法は、手動でDOMを手動で更新し、シミュレートAPIを呼び出すことです。

Answer 2

私は私の説明の詳細の一部が少し間違っているかもしれないと思うが、私の理解がある：あなたが

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

を行うと

それはcheckboxでその酵素のノードへの参照を保存しますが、酵素ツリーが更新されたときには、checkboxが更新されないことがあります。ツリー内の参照が変更され、checkboxがツリーの古いバージョンのノードへの参照になっているため、これが正しいかどうかわかりません。

checkboxを作成する機能は、今ではcheckbox()の値が常に最新のツリーから取得されているため、私のために機能するようです。

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