2016-04-12 23 views
1

İyi bir gün kullanarak bileşeni test ederken tepki bileşeninde çalışmıyor. Şu soruna sahibim: Öğe düzenleyicim var. Nasıl çalışır: 'Ekle' düğmesine basıyorum, bazı bilgileri doldurun ve 'Kaydet' düğmesini tıklayın. _onSaveClick işlevi, yanıt bileşenimi tutamaçlarını tıklatır ve hizmetten arama işlevini çağırır; bu, düzenleme formundan sunucuya param gönderir ve söz vermez. _onSaveClickedPromise, jest

.then(response => { 
    console.log('I\'m in then() block.'); 
    console.log('response', response.data); 
}) 

işlevini yerine getirmekte ve söz sonucu bekler. Gerçek durumda çalışır. Sahte hizmet oluşturdum ve gerçek hizmet yerine yerleştirdim. Servis'in fonksiyonu içerir:

return Promise.resolve({data: 'test response'}); 

sahte iade hizmeti anında çalışması gerekir çözülmesi söz ve .o() bloğu görebileceğiniz gibi. Ama .then() bloğu asla işe yaramaz.

Jest testi:

jest.autoMockOff(); 

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const TestUtils = require('react-addons-test-utils'); 
const expect = require('expect'); 
const TestService = require('./service/TestService ').default; 


let testService = new TestService(); 

describe('TestComponent',() => { 
    it('correct test component',() => { 
    //... some initial code here 
    let saveButton = TestUtils.findRenderedDOMComponentWithClass(editForm, 'btn-primary'); 
    TestUtils.Simulate.click(saveButton); 
    // here I should see response in my console, but I don't 
    }); 
}); 

tasarrufu işlevi bileşeni tepki:

_onSaveClicked = (data) => { 
    this.context.testService.saveData(data) 
     .then(response => { 
     console.log('I\'m in then() block.'); 
     console.log('response', response.data); 
     }); 
    }; 

Hizmeti: Benim konsolunda sadece "Ben hizmetler SaveData işlevinde değilim" bkz

export default class TestService { 
    saveData = (data) => { 
    console.log('I\'m in services saveData function'); 
    return Promise.resolve({data: data}); 
    }; 
} 

.

Nasıl çalışır? Sunucu yanıtını kesmem gerekiyor.

Zaman ayırdığınız için teşekkür ederiz.

+0

Sorunun herhangi bir çözümünü buldunuz mu? Aynı sorunu yaşıyorum. – Krasimir

+0

Hayır. Promises kullanan yöntemleri alay ettim. –

cevap

0

Sen gibi başka birinde test bileşeni sarabilirsiniz: o zaman

class ContextInitContainer extends React.Component { 

    static childContextTypes = { 
    testService: React.PropTypes.object 
    }; 

    getChildContext =() => { 
    return { 
     testService: { 
     saveData: (data) => { 
      return { 
      then: function(callback) { 
       return callback({ 
       // here should be your response body object 
       }) 
      } 
      } 
     } 
     } 
    }; 
    }; 

    render() { 
    return this.props.children; 
    } 
} 

:

<ContextInitContainer> 
    <YourTestingComponent /> 
</ContextInitContainer> 

Yani söz derhal idam edilecektir.