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

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

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'
})

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

1 个答案: