React native with jest Cannot use import statement outside a module

Question

I'm using react native 0.73.0, react 18.2.0, jest 29.6.3, and @testing-library/react-native 12.4.3. When I run command npx jest src/components/ActionButton/__tests__/ActionButton.test.js --detectOpenHandles it gives me error `ActionButton › Check render props › should call onPress

Trying to detect host component names triggered the following error:

Cannot use import statement outside a module

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.`

my jest config is in package.json,

"jest": { "preset": "react-native", "setupFilesAfterEnv": [ "./setupTests.js" ], "transform": { "^.+\.js$": "babel-jest" }, "setupFiles": [ "./jest-setup.js" ], "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|@?react-navigation|@react-native-community|react-native-unimodules|@unimodules/.*|unimodules|@unimodules/react-native-adapter|@react-native/js-polyfills|@testing-library/react-native)" ], "moduleDirectories": [ "src", "node_modules" ], "moduleNameMapper": { "react-native-extended-stylesheet": "mocks/react-native-extended-stylesheet.js" }, "moduleFileExtensions": [ "js", "jsx", "json", "node" ] }

my test case looks good too, but I'm not sure what's the problem

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

describe('ActionButton', () => {
  describe('Rendering', () => {
    it('should match to snapshot', () => {
      const {toJSON} = render(<ActionButton icon="card" title="Title" />);
      expect(toJSON()).toMatchSnapshot();
    });
  });

  describe('Check render props', () => {
    const title = 'Test';
    const icon = 'card';
    const mockFn = jest.fn();

    it('should render correct title', () => {
      const {getByText} = render(
        <ActionButton icon={icon} title={title} onPress={mockFn} />,
      );
      const titleElement = getByText(title);
      expect(titleElement).toBeTruthy();
    });

    it('should render correct icon', () => {
      const {getByProps} = render(
        <ActionButton icon={icon} title={title} onPress={mockFn} />,
      );
      const iconElement = getByProps({name: icon});
      expect(iconElement).toBeTruthy();
    });

    it('should call onPress', () => {
      const {getByTestId} = render(
        <ActionButton icon={icon} title={title} onPress={mockFn} />,
      );
      const button = getByTestId('action-button'); // Assuming you're using testID to identify the button
      fireEvent.press(button);
      expect(mockFn).toHaveBeenCalledTimes(1);
    });
  });
});

setupTest.js

import 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
// eslint-disable-next-line no-unused-vars
import i18n from 'src/../__mocks__/i18nTestMock';
import {lightTheme} from 'src/themes/lightVariables';

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
EStyleSheet.build(lightTheme);

Troubleshooting Steps I've Tried:

1. Verified that @testing-library/react-native is correctly installed.
2. Ensured babel-jest is being used for transforming files.
3. Checked transformIgnorePatterns to ensure it's correctly set up for node_modules.
4. Confirmed that I'm using the correct versions of React Native and React Native Testing Library.

Questions:

1. Why is Jest throwing the "Cannot use import statement outside a module" error?
2. Do I need to modify my Jest configuration further to properly transform dependencies?
3. Could this be related to an issue with how the ActionButton component is imported?