嘲笑一个功能组件

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

你必须在你的函数组件中返回一些东西，即使它是空的。功能组件是Link。

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 日访问）。