jestを使用してコンポーネントをテストするときにPromiseが反応コンポーネントで機能しない

Question

おはよう。私は次の問題があります： 私はアイテムエディタを持っています。 動作方法：[追加]ボタンを押し、情報を入力して[保存]ボタンをクリックします。 私の反応コンポーネントの_onSaveClicked関数は、サービスからclickイベントと呼び出し関数を処理します。これは、編集フォームからサーバーにparamsを送信し、約束を返します。 _onSaveClickedは

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

機能を実現し、約束結果を待ちます。それは実際の状況で動作します。 私は偽のサービスを作成し、実際のサービスの代わりに配置しました。 サービスの機能が含まれています

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

あなたが偽のサービスリターン解決約束と.then（）ブロックはすぐに動作するはずです見ることができるように。しかし.thenブロックは決して動かない。

冗談試験：

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 
    }); 
}); 

はセーブ機能コンポーネントに反応：

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

サービス：

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

私は私のコンソールで "私はサービスSaveDataを機能によ" のみを参照します。

どのようにするには？私はサーバーの反応を真似する必要があります。

ありがとうございます。

Answer 1

あなたは次のように別のもので、あなたのテストコンポーネントをラップすることができます。その後、

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> 

だからあなたの約束が直ちに実行されます。