Warum bekomme ich Methode ist keine Funktion in meinem Test?

Question

Mein Scherz sieht Unittest dies wie:

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import ReactTestUtils from 'react-dom/test-utils' 
import Calculator from "./calculator"; 

test('test that calculator',() => { 
     const component = renderer.create(
      <Calculator></Calculator> 
     ); 
     let tree = component.toJSON(); 
     expect(tree).toMatchSnapshot(); 
     console.log('component=',component.refs); 

     // Simulate click on button -> trigger sumCalc() 
     ReactTestUtils.Simulate.click(component.refs.button); 

}); 

Wenn ich den Test ausführen, erhalte ich:

TypeError: Cannot read property 'button' of undefined 

Meine reagieren Komponente wie folgt aussieht:

import React, {Component} from 'react'; 

export default class Calculator extends Component { 
    constructor(props) { 
     super(props); 
     this.calcSum = this.calcSum.bind(this); 
     this.state = {sum: 0}; 
    } 

    calcSum() { 
     console.log('this.refs.one=', this.refs.one); 
     let s = Number(this.refs.one.value) + Number(this.refs.two.value); 
     this.setState({sum: s}); 
    } 

    render() { 
     return (<div> 
       <input type="text" placeholder="number 1" ref="one"/> 
       <input type="text" placeholder="number 2" ref="two"/> 
       <button ref="button" onClick={this.calcSum}>sum</button> 
       sum: {this.state.sum} 
      </div> 
     ); 
    } 
} 

Wie kann ich das vermeiden Error? Was vermisse ich? Die Komponente funktioniert, wenn sie im DOM gerendert wird, aber der Komponententest hat Probleme.

Answer 1

component.toJSON() gibt ein JSON, kein JavaScript-Objekt zurück. Außerdem ist calcSum kein Prop, sondern eine Methode, die für Ihre Komponentenklasse definiert ist.

Sie können also die getInstance() Methode verwenden, um manuell calcSum aufzurufen.

Try this:

const component = renderer.create(<Calculator />); 

    component.getInstance().calcSum(); 

Jetzt können Sie, dass console.log Ausgabe von calcSum sehen.