标签: storyshots

我在 Jest 测试中遇到错误：

 FAIL  test/storyshots.test.ts
  ? Test suite failed to run

    TypeError: require.requireActual is not a function

      1 | import initStoryshots from "@storybook/addon-storyshots"
      2 | 
    > 3 | initStoryshots({
        | ^
      4 |   configPath: "./storybook",
      5 |   framework: "react-native",
      6 | })

      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js:23:29)
      at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:26:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:48:14)
      at Object.<anonymous> (test/storyshots.test.ts:3:1)

我没有requireActual在代码中的任何地方使用。不过，它看起来像Storybook。

谷歌搜索只出现了一个（自删除后）Stackoverflow 问题，没有答案。

我使用 Storyshots 和 Storybook 进行快照测试。参考这里的文档：link1，link2

完整的错误日志

遵循此处的所有步骤，但不知道为什么会出现错误:)

您可以在这里找到代码

我还在互联网上搜索了可能的解决方案，但没有找到任何有帮助的解决方案。

有人可以告诉我如何解决这个问题吗？

我正在尝试使用门户来渲染模式，它在我的应用程序以及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'

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