ジャスミンを使用して反応コンポーネントのonClickイベントをテストする

Question

私は、onClickイベントが親コンポーネントからプロパティとして渡されるボタンを持つReactコンポーネントを持っています。 <Counter counter=0 incrementCounter={incrementFunction} decrementCounter={decrementFunction} />。

ユニットテストを初めて行ったので、インクリメント/デクリメントボタンをクリックすると関数が呼び出されることを確認しようとしています。このため私はJasmineのspyOnメソッドを使用していますが、呼び出される関数を捕まえることはできません。

私が使用している関数（たとえばlet incrementCounter =() => { console.log("increment!"); };）にconsole.logを出力すると、TestUtils.Simulate.click(incrementButton);を実行したときに関数が呼び出されているとわかりますが、テストは引き続き実行されません。私は何が欠けていますか？

Counter.js

import React, { Component, PropTypes } from "react"; 

class Counter extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { incrementCounter, decrementCounter, counter } = this.props; 
    return (

     <div> 
      <h1>Counter</h1> 
      <p> 
      <b>Counter: {counter} times</b> 
      {" "} 
      <button onClick={incrementCounter}>+</button> 
      {" "} 
      <button onClick={decrementCounter}>-</button> 
      </p> 
     </div> 

    ); 
    } 
} 

Counter.propTypes = { 
    incrementCounter: PropTypes.func.isRequired, 
    decrementCounter: PropTypes.func.isRequired, 
    counter: PropTypes.number.isRequired 
}; 

export default Counter; 

Counter.test.js

import React from "react"; 
import TestUtils from "react/lib/ReactTestUtils"; 
import Counter from "./Counter" 

describe("Counter", function() { 

    let renderedComponent = {}; 
    let heading = {}; 
    let decrementButton = {}; 
    let incrementButton = {}; 
    let incrementCounter =() => {}; 
    let decrementCounter =() => {}; 
    let counter = 0; 

    beforeEach(function(){ 

    renderedComponent = TestUtils.renderIntoDocument(
     <Counter incrementCounter={incrementCounter} decrementCounter={decrementCounter} counter={counter} /> 
    ); 

    heading = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, "h1"); 

    let buttons = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "button"); 

    decrementButton = buttons[1]; 
    incrementButton = buttons[0]; 

    this.incrementCounter = incrementCounter; 

    }); 

    it("renders without problems", function() { 

    expect(TestUtils.isDOMComponent(heading)).toBe(true); 
    expect(heading.innerText).toMatch(/Counter/g); 

    expect(TestUtils.isDOMComponent(decrementButton)).toBe(true); 
    expect(decrementButton.innerText).toMatch(/-/g); 

    expect(TestUtils.isDOMComponent(incrementButton)).toBe(true); 
    expect(incrementButton.innerText).toMatch(/\+/g); 

    }); 

    it("fires the increment function", function() { 

    spyOn(this, "incrementCounter"); 
    TestUtils.Simulate.click(incrementButton); 
    expect(this.incrementCounter).toHaveBeenCalled(); // Error: fuction doesn't get called 

    }); 

}); 

Answer 1

私はジャスミンが実際にspyOnと機能をラップする方法は非常にわからないんだけど、でthis.incrementCounter = incrementCounterを設定してみてくださいbeforeEachの上部にあり、コンポーネントで直接使用します。

beforeEach(function(){ 
    let that = this; 
    this.incrementCounter = incrementCounter; 
    renderedComponent = TestUtils.renderIntoDocument(
    <Counter incrementCounter={that.incrementCounter} decrementCounter={decrementCounter} counter={counter} /> 
); 

それはまだほんの始まりからスパイとしてincrementCounterを宣言し、理由that/thisとグリッチのため、動作しない場合：

let incrementCounter = jasmine.createSpy('incrementCounter') 

と<Counter />とテストの残りの部分でそれを使用。