React Native Expo Jest TypesScript - Cannot use import statement outside module

I am in the process of converting an expo react-native application to TypeScript and have run into some problems with getting jest tests to run.

package.json

{"name": "crossword-companion","version": "1.0.0","main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start -c","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","test": "jest"    },"dependencies": {"@react-native-community/google-signin": "^5.0.0","@react-navigation/bottom-tabs": "^6.4.0","@react-navigation/drawer": "^6.5.0","@react-navigation/native": "^6.0.13","@react-navigation/native-stack": "^6.9.1","@react-navigation/stack": "^6.3.2","@types/styled-components-react-native": "^5.1.3","expo": "~46.0.16","expo-camera": "^12.3.0","expo-gl-cpp": "^11.4.0","expo-image-picker": "^13.3.1","expo-status-bar": "^1.4.0","firebase": "^9.12.1","react": "18.0.0","react-dom": "18.0.0","react-hook-form": "^7.38.0","react-native": "0.69.6","react-native-elements": "^4.0.0","react-native-fs": "^2.20.0","react-native-gesture-handler": "~2.5.0","react-native-image-picker": "^4.10.0","react-native-paper": "^4.12.5","react-native-picker-select": "^8.0.4","react-native-reanimated": "~2.9.1","react-native-safe-area-context": "4.3.1","react-native-screens": "~3.15.0","react-native-web": "^0.18.9"    },"devDependencies": {"@babel/core": "^7.12.9","@babel/preset-typescript": "^7.18.6","@testing-library/jest-dom": "^5.16.1","@testing-library/react-hooks": "^7.0.2","@testing-library/react-native": "^9.0.0","@types/jest": "^26.0.24","@types/react": "~18.0.0","@types/react-native": "~0.69.1","babel-eslint": "^10.1.0","jest": "^26.5.6","jest-expo": "^46.0.1","ts-jest": "^26.5.6","typescript": "^4.6.3"    },"private": true}

babel.config.js

module.exports = function(api) {  api.cache(true);  return {      presets: ["babel-preset-expo",          ["@babel/preset-env", { targets: { node: "current" } }],"@babel/preset-typescript",      ],      plugins: ["react-native-reanimated/plugin"],  };};

jest.config.js

module.exports = {    preset: "jest-expo",    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],};

The specific error I am getting for the above configuration is for the import statement for a Button from react-native-elements:

CrosswordCreate.tsx

import React, { useState } from "react";import { View, Text, StyleSheet } from "react-native";import { Button } from "react-native-elements";import { openCamera, openImageLibrary } from "../../../services";import { CrosswordImageAnalyzer } from "../../CrosswordImageAnalyzer";const CrosswordCreate = () => {    const [image, setImage] = useState({});    const handleOpenCamera = async () => {        const myImage = await openCamera();        setImage(myImage);    };    const handleOpenImageLibrary = async (): Promise<void> => {        const myImage = await openImageLibrary();        setImage(myImage);    };    return (<View style={styles.viewContainer}><Text style={styles.title}>Please select the image of the crossword and clues:</Text><View style={styles.buttonContainer}><Button                    type="clear"                    buttonStyle={styles.buttons}                    title="Camera"                    titleStyle={{ color: "black", marginHorizontal: 20 }}                    icon={{                        name: "camera-outline",                        type: "ionicon",                        size: 28,                        color: "black",                    }}                    iconContainerStyle={{ margin: "auto" }}                    testID="crossword-create-open-camera"                    onPress={handleOpenCamera}                /><Button                    type="clear"                    buttonStyle={styles.buttons}                    title="Library"                    titleStyle={{ color: "black", marginHorizontal: 20 }}                    icon={{                        name: "image-outline",                        type: "ionicon",                        size: 28,                        color: "black",                    }}                    iconContainerStyle={{ margin: "auto" }}                    testID="crossword-create-open-image-library"                    onPress={handleOpenImageLibrary}                /></View><CrosswordImageAnalyzer source={image} /></View>    );};const styles = StyleSheet.create({    viewContainer: {        padding: 10,    },    title: {        fontSize: 24,        textAlign: "center",        marginBottom: 10,    },    buttonContainer: {        flexDirection: "row",        justifyContent: "space-evenly",        alignItems: "center",    },    buttons: {        backgroundColor: "transparent",        borderColor: "blue",        borderWidth: 3,        borderRadius: 5,    },});export { CrosswordCreate };

And the associated test:CrosswordCreate.spec.tsx

import React from "react";import { render } from "@testing-library/react-native";import { CrosswordCreate } from "../../../../src/components/Crosswords/CrosswordCreate";import { describe, expect, it } from "@jest/globals";describe("CrosswordCreate", () => {    it("should render basic text on load", () => {        const { getByText } = render(<CrosswordCreate />);        expect(getByText("Please select the image of the crossword and clues:")).not.toBeNull();    });});

The specific error is:

From what I can gather, it looks like an issue with commonjs modules.

I have tried various jest.config.js configurations but to no avail (too many configurations to list here) but always seem to run into the same issue.

I am not using ts-jest but am prepared to if it gets my tests working.

Any help/ideas would be appreciated.