功能组件在测试中导入时不起作用答案

【问题标题】：Functional component does not work when importing it in test功能组件在测试中导入时不起作用
【发布时间】：2022-01-19 01:57:11
【问题描述】：

我有一个功能组件Foo.js，看起来像这样：

const Foo = () => {
  return (
    <View></View>
  )
}
export default Foo

此组件在应用中渲染时可以正常工作。

问题在于尝试像这样测试组件：

import renderer from 'react-test-renderer'
import Foo from './Foo'
test('testing', () => {
  const component = renderer.create(<Foo />)  <--- Error occurs
})

运行此测试时发生错误（调用renderer.create 时），说： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

奇怪的是测试通过没有任何错误如果我将组件放入测试文件中：

const Foo = () => {
  return (
      <View></View>
  )
}
test('testing', () => {
  const component = renderer.create(<Foo />)
})

【问题讨论】：

标签： javascript react-native jestjs

【解决方案1】：

事实证明，造成这种情况的原因是导出的组件被模拟了，因为我在我的 jest 配置中将 automock 设置为 true。

在jest.config.js 中更改此内容：

automock: true

进入这个：

automock: false

解决了问题。

问题：为什么自动模拟的组件没有返回任何内容？可以通过某种方式解决这个问题，以便将 automock 设置为 true 吗？

【讨论】：