React Native + Jest + React Native Testing Library errors

Question

I'm having trouble with a proper config for the following setup: React Native + Jest + React Native Testing Library. Trying to follow the docs and similar issues solutions, nothing works as expected so far though.

babel.config.js

module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    '@babel/preset-typescript',
    ['@babel/preset-env', {targets: {node: 'current'}}],
  ],
  plugins: [['module:react-native-dotenv']],
};

jest.config.js

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        babelConfig: true, // tried without this line, then JSX parsing doesn't work
      },
    ],
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|react-navigation|@react-navigation/.*))',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  setupFilesAfterEnv: ['./jest-setup.ts'],
};

devDependencies

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/preset-typescript": "^7.24.7",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.85",
    "@react-native/eslint-config": "0.74.85",
    "@react-native/metro-config": "0.74.85",
    "@react-native/typescript-config": "0.74.85",
    "@testing-library/react-native": "^12.5.1",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "eslint-plugin-testing-library": "^6.2.2",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-dotenv": "^3.4.11",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^29.2.3",
    "typescript": "5.0.4"
  },

Test example

import React from 'react';
import {render, screen} from '@testing-library/react-native';
import {Button} from '../Button';

test('renders with default props', () => {
  render(<Button>Default Button</Button>);
  expect(screen.getByText('Default Button')).toBeTruthy();
});

The issue I'm experiencing:

Button Component › renders with default props

    Trying to detect host component names triggered the following error:

    Unexpected token 'export'

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

Without babelConfig: true line in jest.config.js the error is:

  (0, react_native_1.render)(<Button_1.Button>Default Button</Button_1.Button>);
                                       ^

    SyntaxError: Unexpected token '<'