Ошибка при рендеринге React Portal с помощью Storyshots - PullRequest
Новая
       31

Ошибка при рендеринге React Portal с помощью Storyshots

0 голосов
/ 04 сентября 2018

Я пытаюсь визуализировать модал с помощью портала, он отлично работает в моем приложении, а также в Storybook, но как только он добавлен в Storyshots, у меня возникают проблемы.

Первая проблема заключалась в том, чтобы издеваться над API ReactDOM createPortal. Я сделал это так:

ReactDOM.createPortal = element => element;

Если это не добавлено, я получаю следующую ошибку:

Ошибка: Uncaught [Ошибка типа: parentInstance.children.indexOf не является функцией]

Я нашел это решение React Portal Error .

Это решает эту проблему, но затем, когда компонент использует портал, происходит сбой при попытке добавить дочерний элемент. Он не находит компонент 'modal-root' и, следовательно, не может добавить элемент. Я не уверен, как пройти через это.

Мой портал выглядит примерно так же, как пример на сайте React: 

import React from 'react';
import { createPortal } from 'react-dom';
import { node } from 'prop-types';

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // !!!!!!!fails here !!!!!!!!!
    document.getElementById('modal-root').appendChild(this.el);
  }

  componentWillUnmount() {
    document.getElementById('modal-root').removeChild(this.el);
  }

  render() {
    return createPortal(this.props.children, this.el);
  }
}

Теперь происходит сбой с этой ошибкой:

Ошибка: Uncaught [Ошибка типа: Не удается прочитать свойство 'appendChild' со значением NULL]

Позиция указана в фрагменте кода выше.

1 Ответ

0 голосов
/ 05 июля 2019

Как уже упоминалось здесь вы можете установить rc-util и добавить следующее в начало вашего теста или (если вы хотите, чтобы оно было глобальным) внутри вашего jest.setup.js (или в разделе jest package.json, если это то, что вы используете). 

jest.mock('rc-util/lib/Portal')

PS. Если вы используете CRA , ваш установочный файл jest находится в src/setupTests.js

...