Error when running jest on a react native + typescript app (Jest encountered an unexpected token)

Question

It seems like everyone and their mother are having a variation of this problem. Nothing worked from everything I have tried from all the SO questions and GH tickets.

It should actually be quite simple, since my project is pretty much a new barebone project. Yet I still can't figure out what is wrong for the life of me.

When I run jest:

/Desktop/Dropbox/Programming/iphone-app/fe/App.spec.tsx:11
    const tree = react_test_renderer_1.default.create(<App_1.default />).toJSON();
                                                      ^

SyntaxError: Unexpected token <

My config files:

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

-

// tsconfig.json

{
    "compilerOptions": {
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "noFallthroughCasesInSwitch": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "jsx": "react-native",
        "lib": [
            "es6"
        ],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext"
    },
    "exclude": [
        "node_modules"
    ]
}

-

// babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
    };
};

EDIT #1

Just to be clear, I have tried using the react-native preset in the jest config file, with no success (same error):

// jest.config.js

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    globals: {
        'ts-jest': {
            tsConfig: 'tsconfig.json'
        }
    },
    testEnvironment: 'node',
};

Answer 1

It works with this 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
    ],
};

I needed to add

...
moduleFileExtensions: [
    'tsx',
    ...defaults.moduleFileExtensions
],
...

Or else the import App from './App'; in my test would resolve to some other file. By adding tsx as the topmost priority in the moduleFileExtensions option, the app resolves the correct file.

Also the jsx compiler option in tsconfig.json needs to be set to "jsx": "react". I'm not sure why I can't set it to react-native yet, but everything seems to work for now.

EDIT

'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js' is not needed in newer versions of react-native. Keeping it may also cause a problem.