Question

我觉得我缺少什么。我正在尝试模拟功能组件，并且不断给我一个错误

如果我愿意

TestRenderer.create(
      <FunctionalComponent/>
)

出现错误

Invariant Violation: FunctionalComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

如果我将其更改为基于类的组件，它将起作用。

如何模拟功能组件？谢谢！

编辑：

我尝试模拟该组件

const SampleComponent = () => {
  return <View/>
}

它给出了错误，

但是这个

class SampleClassComponent extends Component {
  render() {
    return <View/>
  }
}

不是

运行时发生错误

jests.mock('path/to/component')

Answer 1

您必须在功能组件中返回某些内容，即使该内容为null。功能组件是链接。

import React from 'react';
import TestRenderer from 'react-test-renderer';

function Link(props) {
  return null;
}

const testRenderer = TestRenderer.create(
  <Link/>
);

console.log(testRenderer.toJSON());

export default Link;

或

import React from 'react';
import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link/>
);

console.log(testRenderer.toJSON());

export default Link;

参考文献：

Facebook，Inc.“测试渲染器”。反应https://reactjs.org/docs/test-renderer.html（于2019年10月8日访问）。

开玩笑嘲笑功能组件

1 个答案: