Jasmine

Question

kullanarak tepki bileşeninde onClick olayının test edilmesi OnClick olaylarının, örneğin, ana bileşenden gelen özellikler olarak iletilen işlevlere bağlı olduğu düğmelere sahip bir React bileşenine sahibim. <Counter counter=0 incrementCounter={incrementFunction} decrementCounter={decrementFunction} />.

Birim test için yeniyim React bileşenleri bu yüzden arttırma/azaltma düğmelerine tıklandığında işlevin çağrıldığını kontrol etmeye çalışıyorum. Bunun için Jasmine'in spyOn yöntemini kullanıyorum, ancak çağrılma işlevini asla yakalamıyor.

Kullandığım işlevde bir konsol.log çıkarıyorsam (ör. let incrementCounter =() => { console.log("increment!"); };), TestUtils.Simulate.click(incrementButton); yaptığımda işlevin çağrıldığını söyleyebilirim, ancak yine de test geçmiyor. Neyi kaçırıyorum?

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

Ben Yasemin aslında spyOn ile fonksiyonlarını sarar nasıl tam emin değilim, ama en this.incrementCounter = incrementCounter ayarlamayı deneyin 'un en üst kısmındaki ve bunu doğrudan bileşende kullanın:

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

hala sadece baştan casus olarak incrementCounter ilan, çünkü that/this ile bir aksaklık, çalışmazsa:

let incrementCounter = jasmine.createSpy('incrementCounter') 

ve <Counter /> odasını kullanabilirler ve test kalanı .