テストのリアクション関数がJestで呼び出された

Question

私は、PersonalDetailsという子コンポーネントをレンダリングするReactクラスを持っています。コードは正常に動作しますが、フィールドでEnterキーが押されたときにsaveDataが正しく呼び出されたことをJestに確認させることはできません。私はPersonalDetailsに渡されたSaveDataを機能を嘲笑しているが、アサーションはモックに（コードが簡潔にするために凝縮）失敗：問題の

class PersonalDetails extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleNameChange = this.handleNameChange.bind(this); 
    } 

    render() {    
     return (
      <div> 
       <input onKeyPress={this.handleNameChange} 
         defaultValue={this.props.name}/> 
      </div> 
     ) 
    } 

    handleNameChange(event) { 
     if (event.nativeEvent.keyCode != 13) return; 
     this.props.saveData('name',event.target.value) 
    } 
} 

冗談のテストケースを次のように

class Home extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      name: null 
     };  
     this.saveData = this.saveData.bind(this); 
    } 

    render() {   
     return (
      <div> 
       <PersonalDetails name={this.state.name} saveData={this.saveData}/>; 
       <OtherThing saveData={this.saveData}/> 
      </div> 
     ) 
    } 

    saveData(key, value){ 
     var d = {}; 
     d[key] = value; 
     this.setState(d) 
    } 
} 

PersonalDetailsモジュールがあります：

it("saves data on change", function() { 

    var saveData = jest.genMockFunction(); // mocking saveData 
    const pdComponent = TestUtils.renderIntoDocument(
     <PersonalDetails saveData={saveData} name="My Name"/> 
    ); 

    var input = TestUtils.findRenderedDOMComponentWithTag(
     pdComponent, 'input' 
    ); 

    var node = ReactDOM.findDOMNode(input); 
    node.value = "New Name"; // As per FB tests 
    TestUtils.Simulate.change(node, {target: {value: "New Name"}}); 
    TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); 
    expect(node.value).toBe("New Name"); // Passes 
    // Fails 
    expect(pdComponent.props.saveData).toBeCalledWith("New Name"); 
    // Also Fails 
    expect(saveData).toBeCalledWith("New Name"); 

}); 

私はここで何が欠けていますか？

Answer 1

スパイを作成できます。スパイは、スパイを使用しているので、機能が呼び出されたかどうかを確認することができます。 （ネットからコピー）

サンプルコード

var CompSpec = { 
    displayName: "Comp", 

    plop: function() { 
    console.log("plop"); 
    }, 

    render: function() { 
    this.plop(); 
    return React.DOM.div("foo"); 
    } 
}; 

var stub = sinon.stub(CompSpec, "plop"); 
var Comp = React.createClass(CompSpec); 
React.addons.TestUtils.renderIntoDocument(Comp()); 

// plop() is properly stubbed, so you can 
sinon.assert.called(stub); // pass 

Answer 2

問題の原因はまだ発見することは困難簡単です：

it('just an input test',() => { 
    const keyPressAction = jest.fn(() => { 
     console.log('key press'); 
    }); 

    const input = TestUtils.renderIntoDocument(<input type="text" onKeyPress={keyPressAction.bind(this)}/>); 

    const inputNode: Element = ReactDOM.findDOMNode(input); 

    inputNode.setAttribute('value', 'test'); 
    TestUtils.Simulate.keyPress(inputNode, {key: "Enter", keyCode: 13, which: 13}); 

    expect(input.getAttribute('value')).toEqual('test'); 
    expect(keyPressAction).toBeCalled(); 
}); 

は、あなたの質問内の溶液とこれを比較してください。

onKeyPressイベントを使用しますが、テストではkeyDownをシミュレートしても動作しません。keyPressに置き換えて、ハンドラが呼び出されます。

楽しい一日を！