Wie testen Sie andere Funktionen als Render in einer React-Klasse mit Jest?

Question

Ich versuche, einige TDD auf einer React App zu tun, die ich baue. Mit jest kann ich meine Render-Funktion testen, um zu sehen, ob ich bekomme, was ich erwarte, gerendert zu werden. Was ist, wenn ich eine andere Funktion in der Klasse testen möchte? Wie bekomme ich es in die Hand? Zum Beispiel, hier ist eine React Klasse:

var moment = require('moment'); 
var React = require('react'); 
var utils = require('./utils'); 

module.exports = React.createClass({ 
    days: function() { 
     var days = []; 
     var nextMonth = this.daysFromNextMonth(days, numberOfDays); 
     return days; 
    }, 
    daysFromNextMonth: function(days, numberOfDays) { 
     ... 
    }, 
    render: function() { 
     var that = this; 
     var days = this.days().map(function(day, i) { 
      return <li key={day}>{day}</li> 
     return (
      <ul className='monthly-view'> 
       {days} 
      </ul> 
     ); 
    } 
}); 

Ich möchte einen halten meine days oder daysFromNextMonth Funktionen greifen und sehen, ob sie zurückkehren werden, was ich erwarten würde. Ich habe versucht, in jest wie diese einen Halt der Funktion zu erhalten:

it('should show an render', function() { 
    var result = DailyView.daysFromNextMonth(day, 10) 
    .... 
}); 

Mein error sagt, dass ich keine Methode daysFromNextMonth haben. Wie behebe ich das?

Answer 1

Sie benötigen eine Komponente zu machen Methoden auf sie zu verweisen (ähnlich einer Klasse Instanziierung vor Instanzmethoden verwenden):

var view = TestUtils.renderIntoDocument(<DailyView />) 
var result = view.daysFromNextMonth(day, 10) 

Dann Sie eine der Instanzmethoden aufrufen können.

Answer 2

Kombination von jest und enzyme sollte den Trick tun. Überprüfen Sie die jest DOM testing Dokumentation und enzyme.

Grundidee, Sie können enzyme verwenden, um die Komponenten flach zu rendern und sie zu manipulieren.

Answer 3

Unter Verwendung von Enzym fand ich diesen Verweis auf das Testen der Funktionen der Komponente, https://github.com/airbnb/enzyme/issues/208.

const component = shallow(<MyComponent />); 
component.instance().foo(); 

Sie müssen eine Instanz der Komponente abrufen, bevor Sie ihre Methoden aufrufen können, aber das funktionierte für mich.