Jest throws React.createElement: type is invalid when using CachedImage in any List component

[antondomratchev]

Ran into this issue when trying to test a component that is implementing CachedImage

Example list component:
ListComponent.js

import React, { PureComponent } from 'react'
import { FlatList } from 'react-native'
import { CachedImage } from 'react-native-img-cache'


export default class ListComponent extends PureComponent {
  renderItem = ({ item }) => {
    return (
      <CachedImage
        source={{ uri: item.url }}
        resizeMode="cover"
      />
    )
  }
  render() {
    return (
     <FlatList
       numColumns={4}
       horizontal={false}
       data={this.props.images}
       renderItem={this.renderItem}
       keyExtractor={(item) => item.id}
     />
    )
  }
}

ListComponent.test.js

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import ListComponent from '@components/ListComponent'

 it('renders list of images with CachedImage component', () => {
    const images: [
            { id: 1, url: 'https://via.placeholder.com/80x80' },
            { id: 2, url: 'https://via.placeholder.com/80x80' },
            { id: 3, url: 'https://via.placeholder.com/80x80' },
            { id: 4, url: 'https://via.placeholder.com/80x80' },
      ],

    const component = renderer.create(<ListComponent images={images} />)

    expect(component).toMatchSnapshot()
  })

Resulting Error:

 FAIL  src/components/ListComponent/__tests__/ListComponent.test.js
  ● Console

    console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:71
      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the fil
e it's defined in.

      Check the render method of `CellRenderer`.
          in CellRenderer (created by VirtualizedList)
          in View (created by View)
          in View (created by ScrollViewMock)
          in RCTScrollView (created by Unknown)
          in Unknown (created by ScrollViewMock)
          in ScrollViewMock (created by VirtualizedList)
          in VirtualizedList (created by FlatList)
          in FlatList (created by ListComponent)
          in View (created by View)
          in View (created by ListComponent)
          in ListComponent

It renders just fine on the device both Android and iOS but fails in a test. Looks like CellRenderer from VirtualizedList is expecting a component at mount time but CachedImage does not return a valid component? The test will pass if native Image component is used instead of CachedImage.

Thoughts?

---

Stack:
"react-native": "0.44.0",
"react": "16.0.0-alpha.6",
"jest": "^20.0.0",
"react-test-renderer": "^15.6.1",

[antondomratchev]

Was finally able to figure out how to test this component.
Adding the following mocks to the either setupJest.js file or the individual tests should allow the react-test-renderer to render the Image component from CachedImage component. You can also specify another mock for the CustomCachedImage component, but this worked for me.

jest.mock('react-native-img-cache', () => {
  const mockComponent = require('react-native/jest/mockComponent')
  return {
    CustomCachedImage: mockComponent('Image'),
    CachedImage: mockComponent('Image'),
  }
})
jest.mock('react-native-fetch-blob', () => {
  return {
    DocumentDir: () => { },
    polyfill: () => { },
  }
})

@wcandillon Do you think its worth having this example in the Readme ?

[wcandillon]

@antondomratchev yes that would be fantastic thank you!