I have a functional component Foo.js that looks like this:

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

This component works fine when rendering it in the app.

The issue is when trying to test the component like this:

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

An error occurs when running this test (when calling renderer.create), saying: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The strange thing is that the test passes without any error if I put the component inside the test file:

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