How to mock a third party react-native component with jest?

Question

I am using the NumericInput and it works fine when I run the application on my device.

However, when I run jest, I get all kind of errors:

Answer 1

This was a problem with react-native's official jest preprocessor.

This was my jest config file:

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

To solve the problem, this is my new jest config file:

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

You do not need the jest preprocessor transform item when using the 'react-native' preset. For more info.