[SOLVED] React native elements with jest not working

React native elements with jest not working

I'm using @testing-library/react-native but when I try to test a component that has any rneui: 4.0.0-rc-6 components I get several errors:

The first now was

Details:

    /Users/ep/myProject/node_modules/@rneui/themed/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { AirbnbRatingDefault as AirbnbRating, } from './AirbnbRating';

I was able to solve this by adding @rneui to transformIgnorePatterns inside package.json

but now Im getting

ReferenceError: getCacheKeyFunction is not defined

  at _default (node_modules/@jest/create-cache-key-function/build/index.js:76:3)
  at Object.<anonymous> (node_modules/jest-expo/src/preset/assetFileTransformer.js:5:16)

Any ideas on how to solve this? (my component is using Icon and Input from rneui)

Solution

I was able to solve these by mocking the components

const MockInput = () => (<View />)
jest.mock('@rneui/themed', () => ({
  // AirbnbRating: jest.fn()
  Input: jest.fn(() => <MockInput />),
  Icon: jest.fn(() => <></>)

}))