酵素でテストするときに解決するcomponentDidMountのsetStateを待つ方法は？

Question

いくつかの非同期コードを実行し、componentDidMountでsetStateを呼び出すReactコンポーネントをテストしようとしています。ここで

は、私は私がテストしたいコンポーネントの反応である：ここでは

/** 
* 
* AsyncComponent 
* 
*/ 

import React from 'react'; 

class AsyncComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     loaded: false, 
     component: null, 
    }; 
    } 
    componentDidMount() { 
    this.props.component.then(component => { 
     this.setState({ 
     loaded: true, 
     component: component.default ? component.default : component, 
     }); 
    }); 
    } 
    render() { 
    if (!this.state.loaded) { 
     return null; 
    } 

    const Component = this.state.component; 

    const { component, ...rest } = this.props; 

    return <Component {...rest} />; 
    } 
} 

export default AsyncComponent; 

をテストケースです。私は冗談と酵素を使用しています。

import React from 'react'; 
import { mount } from 'enzyme'; 

import AsyncComponent from '../index'; 

const TestComponent =() => <div>Hello</div>; 

describe('<AsyncComponent />',() => { 
    it('Should render loaded component.',() => { 
    const promise = Promise.resolve(TestComponent); 
    const rendered = mount(<AsyncComponent component={promise} />); 
    expect(rendered.state().loaded).toBe(true); 
    }); 
}); 

state.loadedがfalseに設定されているため、テストは失敗します。期待通りに呼び出す前にAsyncComponentが完全にロードされていることを確認する方法はありますか？

私は期待値アサーションをsetTimeoutにラップするとうまくいくが、それはむしろやっかいなようだ。これを行うにはどうしたらいいですか？

Answer 1

は、私は同じ問題に遭遇したdocs

describe('<AsyncComponent />',() => { 
    it('Should render loaded component.', async() => { 
    const promise = Promise.resolve(TestComponent); 
    const rendered = mount(<AsyncComponent component={promise} />); 
    await promise 
    expect(rendered.state().loaded).toBe(true); 
    }); 
}); 

Answer 2

を見て、どちらかasync/awaitを使用して約束について冗談を通知したり、テストからの約束を返す必要がある、と私はいくつかの不器用を思い付い溶液）（、私はcomponentDidMountでいくつかの関数呼び出しを持っていると私は、その関数が呼び出されているかどうかを確認したかったので、私はあなたのコードを使用してみました

const loadFiltersTree = jest.fn() 
const wrapper = shallow(<FilterTree loadFiltersTree={loadFiltersTree} />) 
jest.useFakeTimers() 
jest.runAllTimers() 
setImmediate(() => { 
    expect(loadFiltersTree.mock.calls.length).toEqual(1) 
})