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

【问题标题】：Reactjs, jest, enzyme, react-universal-component - How do I test a components structure with dynamic imports?Reactjs、jest、酶、react-universal-component - 如何使用动态导入测试组件结构？
【发布时间】：2018-04-02 04:26:42
【问题描述】：

我正在尝试确定在使用 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 可用。

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

【问题讨论】：

标签： reactjs unit-testing enzyme jestjs dynamic-import

【解决方案1】：

我在 Jest 中使用 mock 实现了一个解决方案，以便能够覆盖 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'
})

【讨论】：