React Native运行Detox测试时出现SyntaxError: Unexpected token '<'

问题背景 #

在React Native 0.64.2项目中集成Detox 20.1.2后，编写的dashboard.test.tsx测试用例运行时抛出以下错误：

(0, react_native_1.render)(<Dashboard_1.Dashboard />);
SyntaxError: Unexpected token '<'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1598:14)

测试代码、E2E目录及根目录的Jest配置如下：

测试代码（dashboard.test.tsx） #

import { device } from 'detox';
import { Dashboard } from '../app/screens/Dashboard';
import { render } from '@testing-library/react-native';


describe('First tests', () => {
  beforeAll(async () => {
    await device.launchApp({ newInstance: true, permissions: { notifications: 'YES' } });
  });

  beforeEach(async () => {
    await device.reloadReactNative();
    
   
  it('should be able to test dasboard screen', async () => {
      render(<Dashboard/>);
   
});

E2E目录jest.config.js #

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  transform: {
    '^.+\\.ts?$': 'ts-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  rootDir: '..',
  testMatch: ['<rootDir>/e2e/**/*.test.tsx'],
  testTimeout: 120000,
  maxWorkers: 1,
  globalSetup: 'detox/runners/jest/globalSetup',
  globalTeardown: 'detox/runners/jest/globalTeardown',
  reporters: ['detox/runners/jest/reporter'],
  testEnvironment: 'detox/runners/jest/testEnvironment',
  verbose: true,
};

根目录jest.config.js #

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

错误原因 #

1. 测试代码语法错误：beforeEach函数未闭合，导致it测试用例嵌套错误
2. Detox测试逻辑误用：Detox是端到端测试，无需使用@testing-library/react-native的render方法（该方法用于单元测试渲染组件，Detox直接操作已启动的应用）
3. Jest转译配置问题：重复设置testEnvironment，且transformIgnorePatterns未排除需要转译的RN/Detox相关包
4. 版本不兼容：Jest 29.4.1与React Native 0.64.2、Detox 20.1.2版本不匹配

解决步骤 #

1. 修复测试代码语法与逻辑错误 #

修正语法错误，移除单元测试的render调用，改用Detox原生API操作应用：

import { device, element, by } from 'detox';

describe('First tests', () => {
  beforeAll(async () => {
    await device.launchApp({ newInstance: true, permissions: { notifications: 'YES' } });
  });

  beforeEach(async () => {
    await device.reloadReactNative();
  }); // 补全beforeEach的闭合括号

  it('should be able to test dashboard screen', async () => {
    // 使用Detox API查找并断言页面元素（需给Dashboard组件的元素添加testID）
    await expect(element(by.id('dashboard-title'))).toBeVisible();
  });
});

2. 修正E2E目录的Jest配置 #

调整转译规则，移除重复配置，确保RN/Detox包被正确转译：

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|detox|@detox)/)'
  ],
  rootDir: '..',
  testMatch: ['<rootDir>/e2e/**/*.test.tsx'],
  testTimeout: 120000,
  maxWorkers: 1,
  globalSetup: 'detox/runners/jest/globalSetup',
  globalTeardown: 'detox/runners/jest/globalTeardown',
  reporters: ['detox/runners/jest/reporter'],
  testEnvironment: 'detox/runners/jest/testEnvironment',
  verbose: true,
};

3. 确保TS配置支持JSX #

检查项目根目录tsconfig.json，添加JSX相关配置：

{
  "compilerOptions": {
    "jsx": "react-native",
    "target": "es6",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": ["node_modules", "e2e"]
}

4. 调整Jest版本至兼容范围 #

React Native 0.64.2兼容Jest 27.x版本，降级Jest：

npm install jest@27.5.1 --save-dev

验证测试运行 #

执行Detox测试命令验证修复效果：

detox test -c ios.sim.debug # 对应你的测试配置

内容的提问来源于stack exchange，提问作者Haritha Senevirathne