Реагировать на ферментные порталы тестирования

Question

Я пытался найти решение для тестирования этого довольно простого портала без особой удачи.Кажется, что монтирование - это то решение, которое я могу использовать с Enzyme, который я использую для модульных тестов, но ни одно из найденных мной решений мне не подходит?Любая помощь будет принята с благодарностью.

ПОРТАЛ

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import UGCGalleryOverlay from './UGCGalleryOverlay';

const rootElem = document.getElementById('ugc-gallery-overlay');

class UGCGalleryOverlayPortal extends Component {
  constructor(props) {
    super(props);

    this.el = document.createElement('div');
  }

  componentDidMount() {
    rootElem.appendChild(this.el);
  }

  componentWillUnmount() {
    rootElem.removeChild(this.el);
  }

  render() {
    const { onClick, products, source, mainImage } = this.props;

    return ReactDOM.createPortal(
      <UGCGalleryOverlay
        onClick={onClick}
        products={products}
        source={source}
        mainImage={mainImage}
      />
    , rootElem)
    }
};

UGCGalleryOverlayPortal.displayName = 'UGCGalleryOverlayPortal';

UGCGalleryOverlayPortal.propTypes = {
  products: PropTypes.arrayOf(PropTypes.object).isRequired,
  mainImage: PropTypes.string.isRequired,
  source: PropTypes.shape({
    user: PropTypes.shape({
      displayName: PropTypes.string,
      image: PropTypes.shape({
        smallSquare: PropTypes.shape({
          link: PropTypes.string,
        }),
      }),
    }),
  }).isRequired,
  onClick: PropTypes.func.isRequired,
};

export default UGCGalleryOverlayPortal;

Answer 1

Я надеюсь, что вы уже нашли решение.Но для людей, которые ищут ответы в будущем ...

Похоже, вы передаете неправильный элемент ReactDom.createPortal().Вы передаете rootElem на портал, но вы должны передать элемент, созданный в constructor.

    return ReactDOM.createPortal(
          <UGCGalleryOverlay
            onClick={onClick}
            products={products}
            source={source}
            mainImage={mainImage}
          />
        , this.el)

createPortal(), чтобы отобразить дочерние элементы / компоненты в созданный вами div (вместосоздание нового элемента div), который div затем добавляется к корневому элементу.

см., React Portals