Reactjs、jest、enzyme、react-universal-component - 如何使用动态导入测试组件结构？

Question

我正在尝试确定在使用 React Universal Component 2.0 使用动态导入时如何最好地编写单元测试

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

TestableComponent 是我要测试的组件。我想测试“ChildComp”是否正确返回。实际上，涉及很多逻辑和转换，但作为基本情况，我只是为了能够测试“ChildComp”是否存在。我正在使用通用组件来动态导入“ChildComp”

可测试组件.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

可测试组件单元测试

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 可用。

问题 : 在结构测试之前使用超时让动态导入完成是否合适，或者是否有一种编程方式来确定动态导入何时完成？

Answer 1

我使用 Jest 中的模拟实现了一个解决方案，以便能够覆盖 react-universal-component 的默认行为，并将调用添加到所有组件中的 preload 函数。你只需要在每次测试时使用这个代码，所以我建议把它放在测试设置文件中。这意味着您无需更改代码中的任何内容，并允许您在不等待 X 秒的情况下测试您的组件。
模拟解决方案:

jest.mock('react-universal-component', () => ({
    __esModule: true,
    default: (spec, options) => {
        const universal = jest.
            requireActual('react-universal-component').
            default; // Get original default behavior from the library. 

        const UniversalComponent = universal(spec, options); // Call original function.
        UniversalComponent.preload(); // Preload component.

        return UniversalComponent; // Return loaded Universal Component.
    },
}));

您的代码保持不变:

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