使用Storyshots渲染React Portal时出错

Question

我正在尝试使用门户来渲染模式，它在我的应用程序以及Storybook中都可以正常工作，但是一旦将其添加到Storyshots中，我就会遇到问题。

第一个问题是模拟ReactDOM的createPortal API。我这样做：

ReactDOM.createPortal = element => element;

如果未添加，则会出现以下错误：

错误：未被捕获[TypeError：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);
  }
}

现在它因以下错误而失败：

错误：未被捕获[TypeError：无法读取null的属性'appendChild'

上面的代码段中指示的位置。

Answer 1

你可以做两件不同的事情：

在.storybook添加一个新的DOM元素：

let modalRoot = document.createElement("div")
modalRoot.setAttribute("id", "modal-root")
document.querySelector("body")!.appendChild(modalRoot)

您还可以做的另一件事是模拟文档，因为问题是您试图找到一个不存在的 dom 元素。

Answer 2

正如这里提到的，您可以安装rc-util并将以下内容添加到测试的顶部或（如果您希望它是全局的）jest.setup.js（或 package.json jest 部分，如果您使用的是它）。

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

附言。如果您使用CRA，您的笑话设置文件位于src/setupTests.js