如何找到一个含有酶的元素，该元素由另一个组件的子道具中的函数返回

Question

我正在使用Jest和Enzyme为以下容器组件编写单元测试：

import PropTypes from 'prop-types'
import React from 'react'
import { Route } from 'react-router-dom'

import { Tab } from 'Desktop/components/common'
import { ROUTES } from 'Desktop/constants'

export default class TabContainer extends React.Component {
  static defaultProps = {
    routeExact: false,
  }
  static propTypes = {
    routeExact: PropTypes.bool,
    routePath: PropTypes.oneOf(Object.values(ROUTES)).isRequired,
  }

  render() {
    const { routeExact, routePath, ...props } = this.props

    return (
      <Route exact={routeExact} path={routePath} children={({ match }) => (
        <Tab {...props} active={match ? true : false} route={routePath} />
      )} />
    )
  }
}

我正在为Tab编写测试，但问题是我在使用Enzyme遍历DOM来获取它时遇到了麻烦。在普通组件中，您可以使用.find('Tab')获取它。

但在这种情况下，它不起作用，因为Route的children prop是一个返回组件（而不仅仅是组件）的函数。这意味着Enzyme无法遍历DOM树以找到Tab。

如何在这种情况下获取Tab？

Answer 1

问题是我使用的是Enzyme's shallow rendering API。使用.find('Tab')可以正常使用full rendering API，因为它可以评估Route的children道具（因此可以找到Tab）。