когда я использую jest для тестирования реагирующего компонента, он выдает «Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов)»

Question

мой код

import React, {Fragment} from 'react'
import ReactTooltip from 'react-tooltip'
import PropTypes from 'prop-types'

class Tooltip extends React.Component {
  childRef = React.createRef();

  render() {
    const props = this.props;
    const child = React.Children.only(props.children);

    const trigger = React.cloneElement(
      child,
      {ref: this.childRef, 'data-tip': this.props.title}
    )

    if (!props.title) {
      return trigger
    }

    return (
      <Fragment>
        {trigger}
        <ReactTooltip place={props.placement} effect="solid"/>
      </Fragment>
    )
  }
}

Tooltip.propTypes = {
  title: PropTypes.string,
  children: PropTypes.element.isRequired,
  placement: PropTypes.string,
}

Tooltip.defaultProps = {
  placement: 'bottom',
}

export default Tooltip

и мой тест:

import React from 'react'
import {mount} from "enzyme"

import {Tooltip} from "../../../../../main/js/app/components/ui/Tooltip"
describe('Tooltip', () => {
    let props ,tooltip
    beforeEach(() => {
        props = {
            title: 'test title',
            placement: 'bottom',
            children: <div/>
        }
        tooltip= mount(<Tooltip {...props}/>)
    })

    it('should render', () => {
        // jest.fn(React.Children.only(props.children))
        // const child = React.Children.only(props.children);
        // const  reactTooltip =tooltip.find(ReactTooltip)
       // expect(reactTooltip).toContain("bottom")
    })
})

, когда я запускаю тест, он выдает ошибку: Инвариантное нарушение: Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получили: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы смешали импорт по умолчанию и с именами.

Answer 1

Если вы пытаетесь импортировать именованный экспорт (Tooltip из export default Tooltip), это должно исправить это:

import Tooltip from "../../../../../main/js/app/components/ui/Tooltip"

Однако, если вы только импортируете класс Tooltip, вам нужно будет экспортировать сам компонент класса,

export class Tooltip extends React.Component {
 // the rest 
}

Затем следует импортировать только компонент класса, а не экспорт по умолчанию.

import { Tooltip } from "../../../../../main/js/app/components/ui/Tooltip"