reactjs - Reactjs、jest、enzyme、react-universal-component - 動的インポートを使用してコンポーネント構造をテストするにはどうすればよいですか?

Question

React Universal Component 2.0 を使用して動的インポートを使用する場合の単体テストの最適な記述方法を決定しようとしています。

https://github.com/faceyspacey/react-universal-component

TestableComponent はテストしたいコンポーネントです。「ChildComp」が正しく返されることをテストしたい。実際には、多くのロジックと変換が関係していますが、基本的なケースとして、「ChildComp」が存在することをテストできるようにするためです。「ChildComp」の動的インポートを行うためにユニバーサルコンポーネントを使用しています

TestableComponent.js

import React, { Component } from 'react'
import universal from 'react-universal-component'

const ChildComp = universal(() => import(/* webpackChunkName: 'child' */ 'common/ChildComp'), {
  resolve: () => require.resolveWeak('common/ChildComp'),
  chunkName: 'child'
})

class TestableComponent extends Component {
  constructor (props) {
    super(props)
    this.childNodes = []
  }

  componentWillMount () {
    this.childNodes.push(<ChildComp id='myLink' key='myLink' />)
  }

  render () {
    return (
      <div>{this.childNodes}</div>
    )
  }
}

export default TestableComponent

TestableComponent 単体テスト

import React from 'react'
import TestableComponent from '../TestableComponent'
import { mount, shallow } from 'enzyme'

const waitFor = ms => new Promise(resolve => setTimeout(resolve, ms))

describe('Testable Component test', () => {
  it('tests transformation', async () => {
    const compMount = mount((<TestableComponent />))
    console.log(compMount.debug())

    /* output: <TestableComponent >
      <div>
        <UniversalComponent id="myLink">
          <DefaultLoading id="myLink">
            <div>
              Loading...
            </div>
          </DefaultLoading>
        </UniversalComponent>
      </div>
    </TestableComponent> */

    const compMountWait = mount((<TestableComponent />))
    await waitFor(1000) // dynamic import
    console.log(compMountWait.debug())

    /* output: <TestableComponent>
       <div>
         <UniversalComponent id="myLink">
           <ChildComp id="myLink" />
         </UniversalComponent>
       </div>
     </TestableComponent> */
  })
})

最初の debug() で、最初は ChildComp が表示されていないことに注意してください。コンポーネントのインポートがまだ完了していないという情報を読み込んでいます。

waitFor(1000) の後、ChildComp が使用可能であることがわかります。

質問: 構造テストの前に動的インポートを完了するためにタイムアウトを使用することは適切ですか? または、動的インポートがいつ完了するかをプログラムで判断する方法はありますか?