React Native 结合 Jest 测试时出现“Cannot use import statement outside a module”错误求助

大家好，我在做React Native组件测试时遇到了一个棘手的问题，想请社区的朋友们帮忙分析下原因。

我的技术栈版本是：React Native 0.73.0、React 18.2.0、Jest 29.6.3、@testing-library/react-native 12.4.3。

当我运行这条测试命令时：

npx jest src/components/ActionButton/__tests__/ActionButton.test.js --detectOpenHandles

测试抛出了如下错误：

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.

我的Jest配置写在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"
  ]
}

对应的测试用例代码是这样的：

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);
    });
  });
});

另外我的setupTests.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);

我已经尝试了这些排查步骤，但问题依然存在：

• 确认@testing-library/react-native已正确安装
• 确保配置中使用了babel-jest来转换JS文件
• 检查transformIgnorePatterns，已经包含了需要被转换的相关包，包括@testing-library/react-native
• 核对了React Native和@testing-library/react-native的版本，确认是兼容的

现在还有几个疑问想请教大家：

1. 为什么Jest会抛出“Cannot use import statement outside a module”这个错误？
2. 我是否需要进一步调整Jest配置，来确保所有依赖都被正确转换？
3. 这个问题会不会和ActionButton组件的导入方式或者组件内部的代码有关？

备注：内容来源于stack exchange，提问作者Kanwarjeet Singh