配置转译后Jest仍无法解析文件，报SyntaxError: Unexpected token 'export'

运行React Native组件快照测试时触发SyntaxError: Unexpected token 'export'错误，完整错误日志如下：

D:\Work\Fradium\Repos\reactor\node_modules\react-native\Libraries\Components\ScrollView\AndroidHorizontalScrollContentViewNativeComponent.js:9
export var __INTERNAL_VIEW_CONFIG = {
^^^^^^

SyntaxError: Unexpected token 'export'

   7 |
   8 | import { FC } from "react";
>  9 | import { View, Text } from "tamagui";
     | ^
  10 |
  11 | type TestComponentProps = {
  12 |   message: string;

  at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1505:14)
  at Object.require (../../node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js:39:1)
  at requireActual (../../node_modules/react-native/jest/mockComponent.js:15:12)
  at mockComponent (../../node_modules/react-native/jest/setup.js:148:27)
  at Object.require [as ScrollView] (../../node_modules/react-native/index.js:158:12)
  at Object.<anonymous> (../../node_modules/@tamagui/scroll-view/src/ScrollView.tsx:6:52)
  at Object.<anonymous> (../../node_modules/@tamagui/scroll-view/src/index.ts:1:15)
  at Object.<anonymous> (../../node_modules/@tamagui/sheet/src/SheetScrollView.tsx:19:32)
  at Object.<anonymous> (../../node_modules/@tamagui/sheet/src/createSheet.tsx:55:9)
  at Object.<anonymous> (../../node_modules/@tamagui/sheet/src/Sheet.tsx:1:1)
  at Object.<anonymous> (../../node_modules/@tamagui/sheet/src/index.ts:1:15)
  at Object.<anonymous> (../../node_modules/@tamagui/dialog/src/Dialog.tsx:88:41)
  at Object.<anonymous> (../../node_modules/@tamagui/dialog/src/index.ts:1:15)
  at Object.<anonymous> (../../node_modules/@tamagui/alert-dialog/src/AlertDialog.tsx:45:90)
  at Object.<anonymous> (../../node_modules/@tamagui/alert-dialog/src/index.ts:1:15)
  at Object.<anonymous> (../../node_modules/tamagui/src/index.ts:5:15)
  at Object.require (src/components/TestComponent/index.tsx:9:1)
  at Object.require (src/components/index.ts:11:1)
  at Object.require (src/index.ts:10:1)
  at Object.require (__tests__/components/TestComponent.test.tsx:2:1)

Test Suites: 1 failed, 1 total                                                                                                                                                                                                                                                      
Tests:       0 total                                                                                                                                                                                                                                                                
Snapshots:   0 total
Time:        1.546 s
Ran all test suites.

测试代码：

import renderer from "react-test-renderer";
import { TestComponent } from "../..";

describe("Test component", () => {
  test("renders correctly", () => {
    const tree = renderer
      .create(<TestComponent message="Test string"></TestComponent>)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

当前jest.config.js中的transformIgnorePatterns配置：

transformIgnorePatterns: [
  "node_modules/(?!" +
    "(jest-)?react-native(-.*)?" +
    "|@react-native(-community)?" +
    "|tamagui" +
    "|@tamagui/.*" +
    "|expo(nent)?" +
    "|@expo(nent)?/.*" +
    "|@expo-google-fonts/.*" +
    "|react-navigation" +
    "|@react-navigation/.*" +
    "|react-native-svg" +
    ")/)",
],

已将react-native加入转译白名单，但Jest仍无法解析目标文件，询问该错误是否由转译问题导致，或是其他原因？

这个错误确实是转译配置问题导致的，具体原因和修复步骤如下：

1. 修正transformIgnorePatterns正则匹配逻辑 #

你当前的正则(jest-)?react-native(-.*)?无法覆盖react-native/Libraries/Components/ScrollView/...这类深层嵌套文件，导致这些ES模块未被转译为Jest能识别的CommonJS格式。调整为更精确的匹配规则：

transformIgnorePatterns: [
  "node_modules/(?!(" +
    "react-native" +
    "|@react-native(-community)?/.*" +
    "|tamagui" +
    "|@tamagui/.*" +
    "|expo(nent)?/.*" +
    "|@expo-google-fonts/.*" +
    "|react-navigation/.*" +
    "|@react-navigation/.*" +
    "|react-native-svg" +
    ")/)",
],

或者简化为更易读的写法：

transformIgnorePatterns: [
  'node_modules/(?!react-native|@react-native-community|tamagui|@tamagui|expo|@expo|@expo-google-fonts|react-navigation|@react-navigation|react-native-svg)'
]

2. 确认Jest转译器配置正确性 #

确保jest.config.js中配置了正确的转译器（如babel-jest），且Babel能处理ES模块转译：

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  // 其他配置项...
};

3. 清除Jest缓存 #

修改配置后执行以下命令清除旧缓存，避免缓存中的无效配置干扰测试：

jest --clearCache

4. 验证Tamagui测试兼容性 #

Tamagui作为UI库可能需要额外测试配置，可以在Jest的setup文件中添加Tamagui初始化代码，或确保其所有依赖的ES模块都被纳入转译白名单。

内容的提问来源于stack exchange，提问作者Amogh Kulkarni