Jest encountered an unexpected token ; SyntaxError: Invalid or unexpected token

I've been trying to set up jest for my react native project. It throws this error when I try running the tests.

My package.json file:

{
  "name": "contact",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|)"
    ]
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@reduxjs/toolkit": "^1.8.2",
    "expo": "~45.0.0",
    "expo-image-picker": "~13.1.1",
    "expo-media-library": "~14.1.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-image-picker": "^4.8.4",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/react-native": "^10.1.1",
    "@types/jest": "^28.1.4",
    "babel-jest": "^28.1.2",
    "jest": "^28.1.2",
    "jest-environment-jsdom": "^28.1.2",
    "ts-jest": "^28.0.5",
    "typescript": "^4.7.4"
  },
  "private": true
}

My babel.config.js

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

The screen that I'm trying to test: indexScreen.js

import React, {useState} from 'react';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import { Feather } from '@expo/vector-icons';
import {deleteContact} from '../redux/contactSlice';
import { useSelector,useDispatch } from 'react-redux';
import SearchBar from '../components/searchBar';

const indexScreen= function({navigation}) {
    const value = useSelector((state) => state.contacts);
    const dispatch = useDispatch();
    const [term,setTerm] = useState("");
    const [filteredValue, setFilteredValue] = useState([...value]);

    const searchFilter = (text) =>{
        setTerm(text);
        if (term !==""){
            const result = value.filter((item) => {
                return item.name.toLowerCase().includes(term.toLowerCase())
            });
            setFilteredValue(result);

        }else if (term === ""){
            setFilteredValue([...value]);
        }
        
    }

    return(
        <View>
            <SearchBar
                term= {term}
                onTermChange = {newTerm => searchFilter(newTerm)}
            />
            <Text>{term}</Text>
            <FlatList
                data= {term.length < 1 ? value:filteredValue}
                keyExtrator = {(contact) => contact.id}

                renderItem = {({item}) => {
                    return(
                        <TouchableOpacity onPress = {() => navigation.navigate('Show', {id: item.id})}>
                            <View style ={styles.row}>
                                <Text style = {styles.title}> {item.name}</Text>
                                <TouchableOpacity onPress ={() => dispatch(deleteContact(item.id))}>
                                    <Feather style={styles.icon} name="trash" />
                                </TouchableOpacity>
                            </View>
                        </TouchableOpacity>
                    )
                }}

            />
        </View>
    )
}

indexScreen.navigationOptions = ({navigation}) => {
    return {
        headerRight: () => (
            <TouchableOpacity onPress={() => navigation.navigate('Create')}>
                <Feather name = 'plus' size = {30}/>
            </TouchableOpacity>
        ),

    }
};



const styles = StyleSheet.create({
    row:{
        flexDirection:'row',
        justifyContent:'space-between',
        paddingVertical:20,
        paddingHorizontal:10,
        borderTopWidth:1,
        borderColor:'grey'


    },

    title:{
        fontSize:18
    },
    icon:
    {
        fontSize:20
    }
});


export default indexScreen;

I've tried everything that was mentioned in the official docs of jest, expo and react native. It just throws a different error rather than resolving the issue.