Reactで非同期メソッドをテストするには？

Question

Reactコンポーネントのasync/Promiseベースのメソッドのテストで誰も助けてくれませんか？たとえば、私は本当に簡単な以下のいる私はそうのようなsinonと非同期メソッドの中で最も模擬可能性が私のテストで今コンポーネント（それが唯一のダミーコードです）

import server from './server'; 

class Button extends Component { 
    async handleClick() { 
    if (await canDoSomething()) { 
     const result = await calculateIt(); 
     if (result) { 
     // will be mocked in my unit test 
     await server.sendResultToServer(result); 
     localStorage.setItem('sent', 'true'); 
     } 
     localStorage.setItem('sent', 'false'); 
    } 
    if (localStorage.getItem('sent') === 'true') { 
     // do something 
    } 
    } 

    render() { 
    return <button onClick={this.handleClick}>Click me</button>; 
    } 
} 

に反応：あなたが最初に表示された場合

it('should do something', async() => { 
    const promise = Promise.resolve(); 
    sinon.stub(server, 'sendResultToServer',() => promise); 
    const wrapper = shallow(<Button />); 
    wrapper.find(<button />).simulate('click'); 
    // this await will be resolved FIRST. Only then 
    // await server.sendResultToServer(result); in my code will be resolved 
    await promise; 
    expect(localStorage.getItem('sent')).to.equal('true'); 
}) 

をこのコードでは、すべてが大丈夫だと思うべきです。しかし、残念ながらそうではありません。私のテストでは、私が期待しているの後に約束await promise;とを待っています。しかし、実装コードも約束を待っています。したがって、約束がで実現する場合、の所在地は、の前に実行され、の前には、実装のコードが実行されます。言い換えると、私のテストはテストするコードの前で実行されます（私のマシンでMocha/Chai/Enzymeを使ってテスト済み）。私が必要とするのは逆順です。

これを解決する方法を知っている人はいますか？

Answer 1

あなたはハンドラをクリックトリガする必要があります。

it('should do something', async() => { 
    const promise = Promise.resolve(); 
    sinon.stub(server, 'sendResultToServer',() => promise); 
    const wrapper = shallow(<Select />); 
    wrapper.simulate('click') 
    await promise; 
    expect(localStorage.getItem('sent')).to.equal('true'); 
})